2

考虑以下代码：

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' （父级的空间），但动态地，例如我不想为每个框指定固定宽度，我只想让它们填满水平空间.

这可以做到吗？

4

2 回答 2

1

一种简单且广泛支持的方法是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（条件注释）。有一个.htcJavaScript polyfill 可用，但我不确定它在这个布局上的效果如何。或者，您可以只使用真正的<table>.

于 2012-05-30T10:45:49.123 回答
0

如果您只想填充水平空间output，boxes我会使用float:lefton output。这样，它将占用所需的空间，而boxes盒子将填满其余的空间。

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

5 es 的另一种选择是box，如果您想处于“最前沿”，请查看flexbox 规范。

于 2012-05-30T09:55:00.720 回答