在这种情况下,对齐某些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对齐。因此,“序言”和“内容”之间应该总共有150px。

但是,(至少在Firefox中)情况并非如此。容器div仅被忽略,因此content-div的margin-top也将被忽略,只要它不大于preamble-div的margin-bottom的margin-top。

我能做什么?我还要申请其他的CSS规则吗?我想保持位置:相对以及html结构。

谢谢!

[edit2]

希望你仍然和我在一起;-)

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

谢谢!

[编辑]

事情是这样的:

html - CSS/HTML:垂直div-alignment-Problem(添加了实时演示)-LMLPHP
(来源:666kb.com

我想要的方式(无国界)

html - CSS/HTML:垂直div-alignment-Problem(添加了实时演示)-LMLPHP
(来源:666kb.com

我希望区别是显而易见的,尽管图像是生涩的;-)

最佳答案

这是因为重叠的垂直边距已折叠。

The CSS2 specification说:


  在本规范中,表述塌陷边距是指两个或更多框(可能彼此相邻或嵌套)的相邻边距(没有非空内容,填充或边框区域或间隙将它们隔开)组合形成一个边距。


在您的情况下,由于#preamblemargin-bottom#containermargin-top重叠,因此它们会合拢,因此有效边距较大(在本例中为100px)。

如果背景色不是问题,则可以使用padding代替margin

10-05 20:40
查看更多