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
}

如何让剩余的div在父div中水平填满空格？

1 个答案: