Question

我想显示3个水平对齐的div。所以我创建了一个主div（100％）并将三个div放在其中。在css中我将这三个childdiv设置为float：left。

现在我想要的是将前两个设置为固定宽度，并将第三个设置为剩余的宽度。

我知道表格列的宽度为：auto;自动填充左侧空间，但我不想使用表格。那么我怎么能用浮动来做这个呢？

Answer 1

您可以将overflow:hidden放在第三列，它会自动占用剩余空间。请参阅this fiddle。

实施例

HTML：

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS：

.container {
    border: 1px solid black;
    width: 300px;
    height: 400px;
}

.one, .two {
    border: 1px solid blue;
    float: left;
    width: 50px;
    height: 400px;
}

.three {
    border: 1px solid red;
    height: 400px;
    overflow: hidden;
}

请注意，第三列不应浮动。

Answer 2

正如Ejay建议使用display：table表示外部div并显示：table-cell表示内部div。

如何在空间上向左设置浮动宽度？

2 个答案:

实施例