css - div 的 margin-top/padding-top 问题。显示 block 等不工作

Question

我对编码有点陌生，我发现这些板在过去几周确实很有帮助，但我遇到了一个其他帖子无法帮助我解决的问题，所以这里是:

我在一个 880 像素的矩形 div 中有多个 div。左对齐的 div 工作正常，但 float 的右 div，一个名为 #shopvid_2013_01 的视频 560px 只是不会正确排列。

我希望 #shopvid_2013_01 div 正好排在#shop_13_01 div 旁边，但是当我在 Firefox 上预览它时，它似乎就在我拥有的另一个 div 的下方，并且无论 margin-top 是多少都不会移动或我使用的 padding-top。我尝试添加 display:block 和 overflow:hidden，正如我在其他可能有帮助的帖子中读到的那样，但无济于事。

如有任何帮助，我们将不胜感激!

我已经包含了相关的 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 而不是 CLASS。试试这个:

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

http://jsfiddle.net/gGtPK/