css:将 float div 的高度设置为其高度的最大值

Question

是否可以修复此 jsFiddle使用纯 css 以便同一行中的所有 3 个 div 具有相同的高度，即它们 3 个高度中的最大值？

代码在这里:

<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) 解决方案。谢谢。

Answer 1

您可以将 float:left 替换为 display:table-cell:

EXAMPLE HERE

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