Question

我对编码有点新意，过去几周我发现这些主板真的很有用但是我遇到了其他帖子无法帮助我的问题，所以这里有：

我在一个矩形div中有多个div，横跨880px。左对齐的div正在完美地运行，但浮动的右侧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而不是CLASS。试试这个：

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

http://jsfiddle.net/gGtPK/

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

1 个答案: