Question

我有一个包含3列的div（每个都是div）。问题是父div的高度没有随着列的高度而扩展。

以下是相关的风格：

#content{
background: #fff;
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
overflow: auto;
}

#leftcol { 
position:absolute;
float:left;
top:285px;
z-index:100;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#rightcol {
position: absolute;
right:208px;
top:285px;
width:177px;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#centercol {
margin-left: 288px;
margin-right:200px;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

我认为这是左右列中的绝对定位，这使得事情搞得一团糟。每个不使用列样式的其他页面都可以正常工作。父div的高度随着里面的内容而扩展。

有人可以帮帮我吗？

Jonesy

Answer 1

绝对定位的元素从文档流中取出，因此容器div不会“看到”它们。尝试浮动剩余的3个div，并将overflow:auto;添加到容器div。后者（不是空白的'清算'div）是current best practice。

Answer 2

您的父列不会扩展以适合子列的内容，因为其中2列是position：absolute;

如果一切都是位置：相对或所有位置：绝对可行。

Answer 3

除非有一个非常恰当的原因，你绝对定位#leftcol和#rightcol，你应该将它们浮动，以便它们包含在文档流程中，如Dave Everitt所说。

绝对位置的任何特殊原因？使用浮点数/边距可以很容易地实现看似简单的布局。

Answer 4

而不是clear：两者，新的最好的方法是使用

overflow:auto

父母

上的

之前建议使用像这样的div

<div class="clear"></div>

在父级的末尾，但最好的方法是溢出

CSS：Div不会延伸到子div

4 个答案: