CSS不扩展

为什么父div不扩展以适应内部div？CSS不扩展

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
<div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
    Menu 
</div> 
<div style="float: left; width: 500px;"> 
    text goes here 
</div>

http://jsfiddle.net/C7MHY/1/

来源

2013-07-04 Maeh

因为内的div是浮动的。您可以在浮动div之后添加一个“清晰”（CSS属性为clear的元素设置为left或both）以实现您想要的效果。

或者，您可以将float: left添加到外部div。 “另一个浮动元素内的所有浮动元素都会”自动清除“。

参见http://jsfiddle.net/vovkss/WcSyM/

来源

2013-07-04 19:18:34

因为内的div被风格作为浮动。为了克服这个问题，你得再添内的div这样的：

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
<div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
    Menu 
</div> 
<div style="float: left; width: 500px;"> 
    text goes here 
</div> 
<div style="clear:both;"></div> 
</div>

对于进一步阅读：
MDN: float
MDN: clear

来源

2013-07-04 19:18:37 Khashayar

我不知道该怎么解释，但如果你把显示器：你父母的DIV工作表上。

<div style="display: table; width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
    <div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
     Menu 
    </div> 
    <div style="float: left; width: 500px;"> 
     text goes here 
    </div> 
</div>

来源

2013-07-04 19:19:28 Vismari

除了清除浮动（如在其他的答案中提到）...

或者，你也可以

overflow:hidden或overflow:auto添加规则到父DIV。

FIDDLE

来源

2013-07-04 20:34:29 Danield

有父DIV没有高度，请尝试使用高度：汽车。

来源

2013-07-05 07:47:03

回答

相关问题