html css等于div高度

Question

我有一个容器div，其中包含2个动态高度（未设置高度）div并排，这2个div是内容div，有时一个div的内容比其他div更长，这两个div有不同的颜色，为了有美学页面视图我希望那两个div有相同的高度

如何在不涉及javascript的情况下执行此操作？

<div style="width:100px;border:1px solid black;">
    <div style="width:50px;background-color:blue;float:left;">a <br/> b</div>
    <div style="width:50px;background-color:red;float:left;">a</div>
    <div style="clear:both"></div>
</div>

实例：http://jsfiddle.net/Vbkhq/

在上面的示例中，您可以看到蓝色div大于红色div，因为它包含更多内容，我想要做的是其他div的内容，两个div具有相同的高度并且看起来类似大小

提前谢谢。

Answer 1

您可以使用display:table属性：

.parent{
    width:100px;
    display:table;
    border:1px solid green;
}
.child{
    width:50px;
    background:blue;
    display:table-cell;
}
.child + .child{background:red;}

http://jsfiddle.net/Vbkhq/7/

Answer 2

对于这种情况，我不认为没有Javascript是可能的。但是如果使用表格，你可以处理。

Answer 3

或者看看这个： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks