1

我正在制作一个网站，并将该网站拆分为通常的页眉、主容器和页脚 div。主容器包含 3 个额外的 div，所有 3 个 div（第 1、2、3 节）都有一个与它们关联的 margin-top: 5px 命令。前 2 个 div（第 1 节和第 2 节）完美运行，但第 3 个 div（第 3 节）根本不起作用。它只是粘在第 2 节下方。但是，如果我进入 IE 兼容模式，则第 3 个 div 将下降 CSS 中指定的 5px。

代码如下。CSS：

#middlecontainer {
width: 960px;
height: auto;
}

.section1, .section2, .section3{
width: 960px;
margin-top: 5px !important;
}

HTML：

<div id="middlecontainer">
<div class="section1">
<div class="promo1">
<h1>Celebrate the real flavour of Indian cuisine at Mela.</h1>
<p>&nbs</p>
<p>&nbsp</p>
</div>
<div class="promo2">
<img src="images/home-1.jpg" alt="Mela West End, London" />
</div>
</div>
<div class="section2">
<div class="promo3">
<img src="images/mela-limitless.gif" alt="Up to 50% off Mela Limitless" />
</div>
<div class="promo4">
<img src="images/gift-vouchers.gif" alt="Mela's Gift Vouchers" />
</div>
<div class="promo5">
<img src="images/food-1.jpg" alt="Mela Curries" />
</div>
</div>
<div class="section3">
<div class="promo6">
<img src="images/visit-redhill.gif" alt="Visit Mela Redhill in Surrey" />
</div>
<div class="promo7">
<img src="images/recipe-of-the-month.jpg" alt="Mela's Recipe of the Month" />
</div>
<div class="promo8">
<img src="images/cookery-class.gif" alt="Did you buy a cookery class" />
</div>
</div>
</div>

如果需要，我可以为 .promo div 提供 CSS 代码，但由于它们是子元素，我认为这不会影响父 div。

基思

编辑：这是放入 jsFiddle 的代码，但它似乎在这里工作正常，所以我完全不知道为什么它不能在我的浏览器中工作。http://jsfiddle.net/8xpxH/4/

4

1 回答 1

2

因为您浮动促销元素，所以父元素 ( .sectionX) 的高度为 0。这会弄乱您的边距。

你需要清除浮动。最简单的方法是设置overflow:auto，一切都很好。（auto可能会出现（不必要的）滚动条，这可能是有问题的，所以如果您确定，您的东西非常适合，并且不会出现溢出问题hidden。）

.section1, .section2, .section3{
   width: 960px;
   margin-top: 5px;
   overflow: hidden;
}
于 2013-05-15T13:32:29.323 回答