CSS：Div 不與子 div 一起擴展

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 的高度隨其中的內容而延伸。

有人可以幫我嗎？

瓊斯

Answer 1

絕對定位的元素從文檔流中取出，因此容器 div 不會“看到”它們。 嘗試向左浮動 3 個 div，並添加overflow:auto; 到容器div。 后者（不是空白的“清除”div）是當前的最佳實踐。

或者，使用CSS flexbox來排列 3 個 div。

Answer 2

您的父列不會擴展以適應子列的內容，因為其中 2 個是 position: absolute;

如果一切都是位置：相對或所有位置：絕對它會起作用。

Answer 3

除非有非常相關的原因，您絕對定位#leftcol和#rightcol ， #rightcol您應該浮動它們，以便它們包含在文檔流中，正如 Dave Everitt 所說。

絕對位置的任何特殊原因？ 使用浮動/邊距可以輕松完成看似簡單的布局。

Answer 4

而不是明確：兩者，新的最好的方法是使用

overflow:auto

在父母身上

在建議使用這樣的 div 之前

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

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