在这种情况下,我在对齐一些 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 对齐。因此,“序言”和“内容”之间应该总共有 150 像素。
但是,(至少在 Firefox 中)情况并非如此。container-div 被简单地忽略,因此 content-div 的 margin-top 也被忽略,只要它不大于 preamble-div 的 margin-bottom 的 margin-top。
我能做些什么?我必须申请额外的 css 规则吗?我想保持位置:相对以及 html 结构。
谢谢!
[编辑2]
希望你还在我身边;-)
抱歉耽搁了……这里有一个现场演示。它是如此生动,我什至做了一个小的 jquery-script 来说明问题 - 只需尝试一下按钮。 现场演示
谢谢!
[编辑]
事情是这样的:
(来源:666kb.com)
我想要的方式(无边界)
(来源:666kb.com)
我希望区别很明显,尽管图像很生涩;-)