html css等于div的高度 [英] html css equal div height

问题描述

我有一个容器div，其中包含2个动态高度（高度未设置）div并排，这2个div是内容div，有时一个div有更多的内容，导致从另一个更长，这两个div有不同的颜色，为了美观的页面视图我想要这两个div具有相等的高度

I have one container div which contain 2 dynamic height (height haven't been set) divs side by side , those 2 divs are content divs , sometimes one div have more content than which cause to be more long from the other one , and those two divs have different color , in order to have Aesthetic page view i want those two divs to have equal height

我怎么能这样做而不涉及javascript？ / p>

how can i do this without involve 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>

live示例： http://jsfiddle.net/Vbkhq/

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

live example : http://jsfiddle.net/Vbkhq/

in the example above you can see that the blue div is bigger than the red div because it contain more content , what i want to do is what ever content the other div have the both divs have equal height and be look with similar size.

谢谢你

推荐答案

您可以使用 display：table

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

这篇关于html css等于div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！