html - 如何在空间左侧设置浮动宽度？

Question

我想显示 3 个彼此水平对齐的 div。所以我创建了一个主 div (100%) 并将三个 div 放入其中。在 css 中，我将这三个 childdiv 设置为 float:left。

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

我知道表格列有一个宽度：自动；自动填充剩余空间，但我不想使用表格。那么我怎么能用花车做到这一点呢？

Answer 1

您可以放在overflow:hidden第三列，它会自动占用剩余空间。看到这个小提琴。

例子：

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 和 display: table-cell 用于内部 div。