HTML/CSS：将浮动左元素扩展到父元素的剩余宽度答案

【问题标题】：HTML/CSS: Expanding a float-left element to remaining width of parentHTML/CSS：将浮动左元素扩展到父元素的剩余宽度
【发布时间】：2011-04-12 10:20:30
【问题描述】：

我这辈子都想不通。我有一个具有特定宽度的容器 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 组合的总宽度为 50 像素。如何在不使用 JavaScript 的情况下制作 #expandMe 150px？

【问题讨论】：

【解决方案1】：

如果您从最后一个项目中删除 float，使用 #expandMe，然后将 overflow:auto; 应用于它，我想您会得到您想要的。

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

【讨论】：

【解决方案2】：

Larsenal 是对的，这不能用 div 来完成。你可以去老派，用一张桌子，或者更果断一点，定义好宽度。

【讨论】：

【解决方案3】：

没有 Javascript 就无法完成。

您可能会找到一些巧妙的方法来实现视觉效果，但没有可靠的方法可以完全按照您的描述进行。

【讨论】：