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

回答

相关问题