HTML/CSS:将float-left元素扩展为parent的剩余宽度

Question

对于我的生活,我无法弄清楚这一点.我有一个特定宽度的容器div.里面有几个孩子.我希望最后一个div扩展其宽度以填充容器中剩余的剩余宽度.我怎样才能做到这一点？

这是一个例子(也在http://jsfiddle.net/nbKAr/):

#container {
    width:200px;
    border: 1px solid red;
}
    
#container div {
    float:left;
    border: 1px solid black;
}

<div id="container">
    <div>a</div>
    <div>b</div>
    <div id="expandMe">expand me</div>
</div>

假设带有"a"和"b"的div组合总宽度为50px.如何在不使用JavaScript的情况下制作#expandMe 150px？

Answer 1

如果您删除了float最后一个项目,#expandMe然后使用,然后应用overflow:auto;它,我想你会得到你想要的东西.

overflow: auto; 浮动元素之后将导致最后一个元素填充剩余空间.

这是我的样本.