使用div的margin-top/padding-top问题。显示块等不起作用

Question

我对编码有点新，我发现这些板在过去几周内确实有帮助，但我遇到了其他帖子无法帮助我的问题，所以这里去：

我有一个divs内的一个矩形div，880px横跨。左对齐的div可以很好地工作，但浮动的右分区，被称为＃shopvid_2013_01的视频560px只是不会排列正确。

我想让＃shopvid_2013_01 div正好排在＃shop_13_01 div旁边，但是当我在Firefox上预览它时，它似乎正好位于另一个div的下方，无论使用哪种边距，顶部或填充顶部我使用。我尝试添加display：block和overflow：隐藏，因为我在其他可能有帮助的帖子上阅读，但无济于事。

任何帮助，将不胜感激！

我包括我的相关HTML和CSS：

HTML

<div id="shop_13">  
    <div id="shop_13_01"> 
     <div id="shop_13_text_01"> 
      <div id="shop_smlheading"> 
       <p><b>West Cork Rally 2013</b></p> 
      </div> 
      <div id="shop_p_13"> 
       <p>Our highlights video from a cracking weekend in Clonakilty.</p> 
      </div> 
      <div id="buy_shop_01"> 
       <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> 
        <input type="hidden" name="cmd" value="_s-xclick"> 
        <input type="hidden" name="hosted_button_id" value="6D49SM33FHD8U"> 
        <input type="image" src="01 Images/buy_now_price.png" border="0" name="submit" alt="Buy Now"> 
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
       </form> 
      </div> 
     </div> 
    </div> 
    <div class="shopvid_2013_01"> 
     <iframe width="560" height="315" src="http://www.youtube.com/embed/ozXu2-Zf5B0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

CSS

#shop_13 { 
    width:880px;  
} 

#shop_13_01 { 
    width: 320px; 
    height:315px; 
    margin:30px 0 0 0; 
    background-color:#E9E9E9; 
    float:left; 
} 

#shop_13_text_01 { 
    font-family: "Arial", sans-serif; 
    width:240px; 
    font-size:13px; 
    line-height:1.4em; 
} 

#shop_smlheading { 
    padding: 5px 0 0 20px; 
    font-size:15px; 
} 

#shop_p_13 { 
    font-family: "Arial", sans-serif; 
    width:240px; 
    font-size:13px; 
    line-height:1.4em; 
    margin: -15px 0 0 20px; 
    float:left; 
} 

#buy_shop_01 { 
    padding: 100px 0 0 0; 
    float:left; 
} 

#shopvid_2013_01 { 
    width: 560px; 
    height:315px; 
    float: right; 
    margin-top: 30px; 
    display:block; 
    overflow:hidden; 
} 

Answer 1

看来你要引用shopvid_2013_01作为一个ID而不是一个类。试试这个：

.shopvid_2013_01 { 
    width: 560px; 
    height:315px; 
    float: right; 
    margin-top: 30px; 
    display:block; 
    overflow:hidden; 
} 

http://jsfiddle.net/gGtPK/