使用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/