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

Question

我想显示3个水平对齐的div.所以我创建了一个主div(100%)并将三个div放在其中.在CSS中我将这三个childdivs设置为float:left.

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

我知道表格列的宽度为:auto; 自动填充左侧空间,但我不想使用表格.那我怎么能用花车呢？

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;
}

请注意,第三列不应浮动.