0

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

我在一个矩形 div 中有许多 div，跨度为 880 像素。左对齐的 div 运行良好，但浮动的右 div，一个名为 #shopvid_2013_01 的 560 像素视频不会正确排列。

我想要它，以便#shopvid_2013_01 div 正好在#shop_13_01 div 旁边排列，但是当我在 Firefox 上预览它时，它似乎就在我拥有的另一个 div 的下方，并且无论 margin-top 或 padding 是什么都不会移动-我使用的顶部。当我阅读其他可能有帮助的帖子时，我尝试添加 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;
}
4

1 回答 1

0

您似乎将其引用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/

于 2013-04-18T19:40:26.607 回答