使一行带有边框和边距的 div 动态填充宽度

Question

考虑以下代码：

CSS：

.output {
    margin-right:10px;
    border:1px solid #000;
}
.box{
    border-right:1px solid #000;
}
.first{
    border-left:1px solid #000;
}

HTML：

<div class="line">
    <div class="output">5</div>
    <div class="boxes">
        <div class="box first"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box last"><span>&nbsp;</span></div>
    </div>
</div>

我希望 div 水平排列并填充 'line' div'（父级的空间），但动态例如我不想为每个框指定固定宽度，我只想让它们填满水平空间。

这个可以吗？

Answer 1

一个简单的widely supported 方法是display: table。

见：http://jsfiddle.net/thirtydot/tPCwD/

请注意，您可以更改 .box 元素的数量，它仍然有效。

.line {
    border: 3px solid red;
    display: table;
    width: 100%;
}
.output {
    padding-right: 10px;
    display: table-cell;
    width: 1px; /* take the minimum amount of space */
    white-space: nowrap;
}
.output > span {
    border:1px solid #000;
}
.boxes {
    display: table;
    width: 100%;
    table-layout: fixed; /* to force equal width columns */
}
.box {
    border-right:1px solid #000;
    display: table-cell;
    background: #ccc;
}
.first {
    border-left:1px solid #000;
}

如果需要对 IE7 及更低版本的支持，您可以仅对这些浏览器使用 JavaScript（条件注释）。有一个.htc JavaScript polyfill available，但我不确定它在这种布局下的效果如何。或者，您可以只使用真正的<table>。

Answer 2

如果您只想用output 和boxes 填充水平空间，我会在output 上使用float:left。这样，它将根据需要占用尽可能多的空间，boxes 框将填满其余空间。

另一方面，如果您想让五个 box divs 填充其父代，只需给每个 width:20% 并设置 box-sizing:border-box 以考虑边界。在这种情况下，你必须让浏览器知道每个盒子之间的关系应该有多大，否则它怎么知道要扩展哪个盒子来填充空间？

5 boxes 的另一种选择是，如果您想走在“前沿”，请查看 flexbox specification。