Question

我正在建立一个网站并将网站拆分为通常的标题，主要容器和页脚div。 maincontainer包含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/

Answer 1

因为你浮动你的促销元素，所以父元素（.sectionX）的高度为0.这会弄乱你的边缘。

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

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

CSS - Margin-top不能在一个选择器上工作，但在兼容模式下工作

1 个答案: