如何使DIV匹配浮动的孩子的高度（浮动列），但允许子元素突出在两侧

我设计了一个3列的布局，基于包含3个浮动div的div。如何使DIV匹配浮动的孩子的高度（浮动列），但允许子元素突出在两侧

问题是容器div不符合列的高度，因为我打算。它好像根本没有内容，因此3列垂直伸出。

为了解决这个问题，我尝试使用overflow：hidden和它制作了这个技巧，但是我的设计有一个在左边伸出来的div，因为这个属性不会让任何东西伸出来。

有没有更好的方法来解决高度问题？谢谢。

2012-09-04 Frildoren

向我们展示你的HTML，告诉我们您目前的CSS，我们展示的图片你想要它的样子。理想情况下，发布一个[SSCCE]（http://sscce.org）[您当前的代码的实时演示]（http://jsfiddle.net/），以便我们可以看到发生了什么，并且更容易建议和演示，变化。基本上：帮助我们来帮助你。（要在您的问题中包含更多信息，请使用“编辑”链接，在标签下方;请勿尝试在评论中张贴代码。） –

使用clearfix类 - 应该做的工作：

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
}

检查http://jsfiddle.net/YyMjJ/1/

来源

2012-09-04 13:36:22 thpnk

通常可以使容器的高度通过在<div style="clear:both;"></div>投掷之后都可以扩展到其子结束你的孩子..这样。

<div id="container"> 
    <div class="child0"></div> 
    <div class="child1"></div> 
    <div class="child2"></div> 

    <div style="clear:both;"></div> 
</div>

我不确定这是否被社区认为是黑客行为。但我有时候会用它。另外，我看到人们不使用div，而是使用<hr>，并且也适用该风格。

来源

2012-09-04 13:36:49 Kristian

非常感谢，它现在正在工作 – Frildoren

不客气。不要忘记接受答案。 :) – Kristian

假设我理解正确的问题，你可以使用一个清算DIV：

<div id="dre"> 
     <div class="float" style="height:100px"></div> 
     <div class="float" style="height:200px"></div> 
     <div class="float" style="height:30px"></div> 
     <div id="clear"></div> 
    </div>

见这里 - http://jsfiddle.net/C7FCC/

来源

2012-09-04 13:37:08 Alex

如何使DIV匹配浮动的孩子的高度（浮动列），但允许子元素突出在两侧

回答

相关问题