css - 强制 float div 触摸其父级的底部

Question

我在特定案例中遇到了一个常见问题...我尝试自动扩展 float div 的高度，以强制它们触及父级的底部。

这是一个例子:http://jsfiddle.net/k95nK/1/我的目标是所有 float 列都具有相同的高度，并触及容器的底部。 (因此列必须都具有内容最多的列的高度) parent 的高度无法固定。内容必须增加父级的高度。

.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}

#allcontent {
background-color : #90c89a;
}

#allcontent:after {
content:"";
display: table;
clear: both;
}


<div id="allcontent">
    <div class="content">hello</div>
    <div class="content">hello</br>hello</div>
    <div class="content">hello</div>
</div>

我知道这种解决方案经常被问到，( How to get a div to resize its height to fit container? ) 但我找不到适合我的具体情况的解决方案。

我试过使用绝对定位，但它似乎使它们超出了文档流...

Answer 1

删除 float:left 并将 display:table-cell 应用到您的内容 div。

.content {
width : 150px;
background-color : #123456;
display:table-cell;
border-right:10px solid #90c89a;
}

DEMO