css：将浮动div的高度设置为它们的高度的最大值 [英] css: set the height of floating divs as maximum of their heights

问题描述

可以使用纯CSS 修复此 jsFiddle ，以便所有3个

Is it possible to fix this jsFiddle with pure css so that all 3 divs that are in the same row have the same height, the maximum of their 3 heitghts?

代码在这里：

<style>
#main{
    border:1px solid red;
    width:605px;
    overflow:hidden;
}
#zero{
    border:1px solid blue;
}
.small{
    border:1px solid green;
    float:left;
    width:199px;
}
</style>
<div id="main">
    <div id="zero">
        0
    </div>
    <div class="small">
        small text
    </div>
    <div class="small">
        large text large textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge text
    </div>
    <div class="small">
        another small text
    </div>
</div>

同样，纯css解决方案更好。如果没有，那么html解决方案是更好的。不需要Javascript（/ jQuery）解决方案。
谢谢。

Again, pure css solution is preferable. If not, then html solution is preferable next. Javascript (/jQuery) solution is not needed. Thank you.

推荐答案

您可以替换 float：left display：table-cell ：

这里的例子

.small {
    border:1px solid green;
    display:table-cell;
    width:199px;
}

这篇关于css：将浮动div的高度设置为它们的高度的最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！