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>

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

可以这样做吗？

Answer 1

执行此操作的简单方法是display: table。

请参阅： widely supported

请注意，您可以更改.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用于那些浏览器（条件注释）。有一个http://jsfiddle.net/thirtydot/tPCwD/，但我不确定它对这种布局的效果如何。或者，您可以使用真实的<table>。

Answer 2

如果您只想填充水平空间output和boxes，我会在float:left上使用output。这样，它将占用所需空间，boxes框将填充其余空间。

另一方面，如果您希望让五个box div填充其父级，请为每个人填写width:20%并将box-sizing:border-box设置为考虑到边界。在这种情况下，你必须让浏览器知道每个盒子相对于彼此的大小，否则它将如何知道要扩展哪个盒子以填充空间？

5 box es的另一个替代方案，如果你想要处于'前沿'，那就是调查flexbox specification。

创建一个带边框和边距的div线，动态填充宽度

2 个答案: