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