css：將浮動div的高度設置爲其高度的最大值

Question

是否可以修復jsFiddle與純css以便同一行中的所有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

您可以用display:table-cell取代float:left：

EXAMPLE HERE

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