在这种情况下,对齐某些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
谢谢!
[编辑]
事情是这样的:
(来源:666kb.com)
我想要的方式(无国界)
(来源:666kb.com)
我希望区别是显而易见的,尽管图像是生涩的;-)
最佳答案
这是因为重叠的垂直边距已折叠。
The CSS2 specification说:
在本规范中,表述塌陷边距是指两个或更多框(可能彼此相邻或嵌套)的相邻边距(没有非空内容,填充或边框区域或间隙将它们隔开)组合形成一个边距。
在您的情况下,由于#preamble
的margin-bottom
和#container
的margin-top
重叠,因此它们会合拢,因此有效边距较大(在本例中为100px)。
如果背景色不是问题,则可以使用padding
代替margin
。