父div没有根据其子高来获取高度。

HTML

<div id="body"> 
    <div id="left">a</div> 
    <div id="main">b</div> 
    <div id="right">c</div> 
</div>

CSS：

#body { width: 520px; border:solid 10px #d2d2d2;} 
#left { float:left;width:170px;height:200px} 
#main { float:left;width:170px;height:400px} 
#right { float:left;width:170px;height:200px}

为什么犯规#body环绕的div＃左，＃DIV＃主，DIV＃右

如果我设置显示：表是好的

来源

2012-06-04 Keld Jakobsen

您已经拥有元素/标记。不要使用它两次。如果你用溢出设置body元素：hidden;它会正确地磨合。 – Jawad

试试这个：

<div id="body"> 
    <div id="left">a</div> 
    <div id="main">b</div> 
    <div id="right">c</div> 
    <div style="clear:both;"></div> 
</div>

来源

2012-06-04 10:14:02 voy

Yuck。额外的标记:( – PeeHaa

@RepWhoringPeeHaa：这是一种方法，它是这样做的：溢出：隐藏;是否也有问题 – Jawad

只有在使用像阴影这样的新东西时@Jawad或者我错过了什么吗 – PeeHaa

添加溢出：隐藏到#body CSS。

#body { width: 520px; border:solid 10px #d2d2d2; overflow:hidden;}

使用父元素上的任何种类（例如clearfix）。参见CSS招数文章供参考： https://css-tricks.com/snippets/css/clear-fix/

来源

2012-06-04 10:14:43 SVS

使用'overflow：hidden'使得我的页面无法滚动。 –

的float属性被设计成允许内容通过包含它的块的底部下降，因为它打算用于的东西，如其中多个段落应环绕图像。

有关更多详细信息和示例，请参见containing floats。

在#body上设置overflow: hidden以使容器展开以包含其内的所有浮动元件。或者请参阅some other techniques。

另一种方法，虽然在特定的旧版本的Internet Explorer中不起作用的方法是使用display: inline-block而不是float。

来源

2012-06-04 10:14:51 Quentin

#body { 
    overflow:hidden; 
}

来源

2012-06-04 10:16:54

父div没有根据其子高来获取高度。

回答

相关问题