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

显示:表格； 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
}