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

Posted 2023-03-06

【中文标题】HTML/CSS：将浮动左元素扩展到父元素的剩余宽度

【英文标题】：HTML/CSS: Expanding a float-left element to remaining width of parent

【发布时间】：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; 在浮动元素之后会导致最后一个元素填充剩余空间。

Here is my sample.

【参考方案2】：

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

【参考方案3】：

没有 Javascript 就无法完成。

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