0

在这种情况下，我在对齐一些 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）

我希望区别很明显，尽管图像很生涩；-)

4

3 回答 3

1

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

CSS2 规范说：

在本规范中，表达折叠边距是指两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域或间隙将它们分开）组合形成单个边距.

在您的情况下，因为#preamble'margin-bottom和#container'margin-top重叠，它们会被折叠，所以有效边距是较大的（在本例中为 100px）。

如果背景颜色不是问题，您可以使用padding代替margin.

于 2010-02-19T15:36:43.003 回答
0

我找到了摆脱这个奇迹的方法：好的旧溢出：隐藏；诡计...

添加属性时溢出：隐藏；对于#container，行为就像预期的那样。

你可以在这里证明差异

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

还是要谢谢你的帮助！

于 2010-02-19T18:37:37.413 回答
0 
<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 嵌套在另一个 Div 中，因此总共不会有 150px ;)。记住边距在单元格外，在单元格内填充！

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

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

于 2010-02-19T14:33:46.123 回答