Question

在这种情况下我对齐一些div有问题：

<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
    <div id="content" style="position: relative; margin-top: 50px;">
        Content
    </div>
</div>

（当然这只是一个再现我想避免的行为的例子。）

我原本期望content-div与container-div对齐。因此，“Preamble”和“Content”之间应该共有150px。

但是，（至少在Firefox中）并非如此。容器div被简单地忽略，因此content-div的margin-top也被忽略，只要它不大于preamble-div的margin-bottom的margin-top。

我该怎么办？是否需要应用附加 css规则？我想保持位置：相对以及html结构。

谢谢！

[EDIT2]

希望你还在我身边; - ）

抱歉延迟...这是一个现场演示。它是如此的生动，我甚至做了一个小的jquery脚本来说明问题 - 只需尝试按钮。 Live Demo

谢谢！

[编辑]

它的方式：

bad http://666kb.com/i/bgu50t1yanlgyvc8u.gif

我想要的方式（没有边框）

alt text http://666kb.com/i/bgu561f1wvb3aejsu.gif

我希望尽管图像生涩但差别很明显; - ）

Answer 1

那是因为重叠的垂直边距会崩溃。

The CSS2 specification说：

在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容，填充或边框区域或间隙将它们分开）组合形成一个保证金。

在您的情况下，由于#preamble的{{1}}和margin-bottom的{{1}}重叠，它们会崩溃，因此有效边距会更大（在此case，100px）。

如果背景颜色不是问题，您可以使用#container代替margin-top。

Answer 2

<div id="preamble" style="margin-bottom: 100px;">Preamble</div> 
<div id="container" style="position: relative;"> 
    <div id="content" style="position: relative; margin-top: 50px;"> 
        Content 
    </div> 
</div>

首先，我重新制作样式表。当你有很多元素时它会节省你的时间，也会让你的代码更清洁。

我在测试代码时看到的内容div显示在Container内部，边缘位于50px之上。怎么了？

我认为你想要实现的是：

<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
 <div id="container" style="position: relative; border: solid black 1px;"> 
  <div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;"> 
   Content 
  </div> 
 </div> 
</div>

祝你好运！你没有将Div嵌入另一个中，因此它不会总共150px;）。记住边距位于单元格之外并填充单元格内部！

当我现在阅读你想要保持你的html结构相同时，这是不可能的。一旦你给你的第一个div一个100px的边距，这意味着下一个元素将被放置在该元素下100px。而且因为你是一个嵌套的div接下来，在50px的顶部有一个边距，这意味着你创造了超过150px的总空间......

你为什么要维护你的html结构？

Answer 3

我找到了摆脱这个奇迹的方法：好老溢出：隐藏;特技...

当你添加属性overflow：hidden; #container，行为就像预期一样。

你可以证明差异here

但我还是不完全相信。为什么这个技巧可以解决我的问题，还有其他方法吗？

无论如何，谢谢你的帮助！

css / html：vertical div-alignment-Problem（添加了live-demo）

3 个答案: