html css等于div高度答案

【问题标题】：html css equal div heighthtml css等于div高度
【发布时间】：2011-11-28 20:25:21
【问题描述】：

我有一个容器 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 具有相同的高度并且看起来相似大小。

提前谢谢你。

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：