如何讓剩餘的div在父div中水平填充空間？

Question

這裏就是我的工作：

<div id="parentDiv"> 
    <div id="labelDiv"></div> 
    <div class="contentDiv"></div> 
    <div class="contentDiv"></div> 
    <div class="contentDiv"></div> 
    <!-- ... --> 
</div> 

labelDiv始終是一個固定的大小。在這種情況下，30px。 parentDiv設置爲75％的寬度。可以有1到任意數量的contentDiv。我想要的是均勻分隔contentDiv對象。我試圖用CSS（2.1，如果可能）做到這一切。我能夠編寫一個快速的jQuery函數來平等地分隔div，但我不覺得它是最好的解決方案。

任何想法？

Answer 1

display: table; table-layout: fixed可以做到這一點。

這是所有的CSS 2.1按要求，但檢查browser support - 它在IE6/7除外。

參見：http://jsfiddle.net/thirtydot/Ec8Tw/

CSS：

#parentDiv { 
    display: table; 
    table-layout: fixed; 
    width: 75%; 
    height: 100px; 
    border: 1px solid #444 
} 
#parentDiv > div { 
    display: table-cell; 
    border: 1px dashed #f0f 
} 
#labelDiv { 
    width: 30px; 
    background: #ccc 
}