如何让剩余的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 
}