css/html：垂直分区对齐问题（添加了实时演示）

在这种情况下，我在对齐一些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被忽略，因此内容div的边距顶部也被忽略，只要它不大于前导div的边距底部的边距顶部

我能做什么？是否有我必须应用的其他css规则？我想保持位置：相对以及html结构

谢谢大家!

[编辑二]

希望你仍然和我在一起-

抱歉耽搁了。。。这里有一个现场演示。它是如此的生动，我甚至做了一个小的jquery脚本来说明这个问题——只需尝试一下按钮。

谢谢大家!

[编辑]

事实上：

资料来源：

我想要的方式，没有边界

资料来源：

我希望差异是明显的，尽管图像是不稳定的-

<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> 

首先，我要做一个样式表。当您有很多元素时，它将节省您的时间，并且还将保持代码更干净

当我测试代码时，我看到contentdiv显示在容器内部，在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嵌套在另一个Div中，因此它总共不会是150px；。请记住，边距在单元格外部，填充在单元格内部

当我现在读到你想要保持你的html结构不变时，那是不可能的。 一旦你给你的第一个div一个100px的余量，这意味着下一个元素将被放置在该元素下100px。因为你有一个嵌套的div，在上面有一个50px的边距，这意味着你创造了超过150px的总空间

---

为什么要维护html结构？

这是因为重叠的垂直边距被折叠了

说：

在本规范中，表达式“折叠边距”表示相邻边距没有非空内容、填充或边框区域或间隙，将两个或多个框分隔开，这些框可以彼此相邻或嵌套，以形成单个边距

在您的例子中，因为序言的边距底部和容器的边距顶部重叠，所以它们被折叠，所以有效边距在本例中是较大的，100px

---

如果背景色不是问题，你可以用填充代替边距。

我找到了一个解决这个奇迹的方法：好的旧溢出：隐藏；诡计

添加属性溢出时：隐藏；对于容器来说，行为与预期一样

你可以证明这一点

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

---

无论如何，谢谢你的帮助

我不能复制这一点，无论是在FF 3.6，即8或铬。前言的底部和内容的顶部之间总是有150像素的距离。你能链接到你的问题的现场演示吗？而且-显然-我建议首先确保您使用/声明的是有效的doctype，以避免怪癖模式错误。奇怪。。。我会添加图片-当我在家时，我会添加一个实时演示，并在大约1小时内访问我的ftp服务器。区别不清楚；！谢谢你的回答。我想保留我的html结构，因为我用这个例子简化了一个更复杂的jquery问题。在某些鼠标事件上，content div应该通过展开margin top向下移动。其他一切都应该保持不变。我希望有一个解决办法。。。我不知道downvoteit是否会有一个空白顶部。事实上，不是容器，而是内容有页边空白。似乎你是对的然而，这个事实对我来说似乎很奇怪。。。