css：将浮动div的高度设置为其高度的最大值

Question

是否可以使用纯css 修复此jsFiddle，以便同一行中的所有3个div具有相同的高度，即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）解决方案。 谢谢。

Answer 1

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

EXAMPLE HERE

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