CSS：Div不擴展與子div

我有一個包含3列（每個作爲一個div）的股利。問題是父div的高度不能隨列的高度一起擴展。CSS：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

來源

2010-09-17 iamjonesy

從常問問題（http://stackoverflow.com/faq）：「我不應該在這裏問什麼樣的問題？...網頁設計和HTML/CSS佈局，你的職位是」設計師「，問在Doctype上「。 – 2010-09-17 18:03:18

這是一個很好的觀點：http://doctype.com/儘管你有時可能會得到更準確的答案:-) – 2010-09-18 08:21:48

將絕對定位的元素從文檔流中取出，因此容器div不會「看見」它們。嘗試左移3個div，並將overflow:auto;添加到容器div。後者（不是空白'清除'div）是current best practice。

來源

2010-09-17 17:59:06

嗨，感謝您的回覆！我改變了所有3列向左浮動並添加了保證金來定位它們。一切都在正確的地方水平，但垂直中心列在左邊。有沒有解決這個問題？ – iamjonesy 2010-09-17 20:20:08

如果所有3列現在都在正確的位置，您的意思是中間的列比左側略短嗎？你能把它放在什麼地方嗎？ – 2010-09-18 08:18:20

嗨，這裏的開發網站http://booyahachieved.com - 它的主頁上的3列 – iamjonesy 2010-09-18 08:48:47

你父列不會延長，因爲他們中的2，以適應孩子列的內容是位置：絕對的;

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

來源

2010-09-17 17:58:56 Mark

，而不是明確的：既，新做的是

overflow:auto

父

有人建議使用一個div像這樣

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

前的最佳途徑

在父母的盡頭，但最好的辦法是溢出

來源

2010-09-17 18:00:11

父母使用溢出：汽車，但謝謝我不知道它已經取代明確：都！ – iamjonesy 2010-09-17 20:27:03

除非有一個非常相關的原因，你是絕對定位#leftcol和#rightcol，你應該將它們浮動以便它們包含在文檔流程中，就像Dave Everitt所說的那樣。

絕對位置的任何特定原因？看起來像一個簡單的佈局可以很容易地用浮動/邊距來完成。

來源

2010-09-17 18:04:12 dmackerman

嗨感謝您的答覆，我已經漂浮了一切左，定位一切相對，但現在一切都在正確的地方水平，但垂直中心列就在左下:( – iamjonesy 2010-09-17 21:11:41

CSS：Div不擴展與子div

回答

相關問題