Question

我有两个div彼此相邻 - 一个固定，一个流体。但是，每当我将一个margin-top应用于流体div中的一个段落时，它不会填充div的整个高度，并且还会将它旁边的固定div向下推。不幸的是，我不能使用overflow：auto来解决这个问题，因为我需要使用Fluid div来获得溢出：可见以满足特定需求。很奇怪，我知道，但我确信必须有解决方案。但是，我一直在努力工作几个小时没有运气。

这是我遇到的问题的演示。我还在div中包含了一个解释：http://jsfiddle.net/LejbU/

<div class="left">
    <p>This div has a fixed width of 300px.<p>
</div>
<div class="right">
    <p class="withMargin">Test</p>     
</div>

-

.left {
background-color: yellow;
width: 300px;
height: 100%;
float: left;
}

.right {
background-color: pink;
height: 100%;
margin-left: 320px;
overflow: visible;

}

p {
margin: 0;
padding: 10px;
color: black;
}

p.withMargin {
margin-top: 100px;
margin-bottom: 100px;
}

Answer 1

这是因为CSS Box模型定义的折叠边距：

CSS 2.1 8.3.1 Collapsing margins

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

从定义：

内嵌块框的边距不会崩溃（甚至没有它们的流动儿童。）

因此，请将p.withMargin的显示更改为inline-block以避免此行为。

演示：http://jsfiddle.net/LejbU/2/

Answer 2

你已成为collapsing margins (MDN)的受害者。

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。

在你的情况下：

父母和第一个/最后一个孩子

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

有几种方法可以解决这个问题，我只是使用填充来改变我需要的布局而不改变我认为更危险的其他属性。在这种情况下：http://jsfiddle.net/rgthree/LejbU/1/

p.withMargin {
    padding-top: 100px;
    padding-bottom: 100px;
}

Answer 3

将此display:inline-block;添加到p.withMargin

Answer 4

我找到的另一种解决方案。在右侧div中创建一个新div，并将以下css应用于新div：

.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}

示例：http://jsfiddle.net/62ueY/

流体div正在推动旁边的固定div。它也没有填满预期的高度

4 个答案: