HTML/CSS：将左浮动元素扩展到父级的剩余宽度
对于我的一生，我无法弄清楚这一点。我有一个具有特定宽度的容器 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？
For the life of me I can't figure this out. I have a container div with a specific width. And a few children div inside it. I want the last div to expand its width to fill in the remaining width left in the container. How can I do this?
Here's an example (also at 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>Let's say the divs with "a" and "b" combine for a total width of 50px. How can I make #expandMe 150px without using JavaScript?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
没有 JavaScript 就无法完成。
您可能会找到一些巧妙的方法来实现视觉外观，但没有可靠的方法可以完全按照您所描述的方式进行操作。
Can't be done without Javascript.
You may find some clever way to achieve the look visually, but there's no reliable way to do exactly what you describe.
Larsenal 是对的，这不能用 div 来完成。您可以采用老式方法并使用表格，或者更加果断一点并定义宽度。
Larsenal is right, this can't be done with div's. You can go old school and use a table, or just get a little more decisive and have the width's defined.
如果您使用
#expandMe删除最后一项的float，然后对其应用overflow:auto;，我想您会得到你正在寻找的东西。浮动元素之后的
overflow: auto;将导致最后一个元素填充剩余空间。这是我的示例。
If you remove the
floatoff your last item, with the#expandMeand then applyoverflow:auto;to it, I think you'll get what you're looking for.overflow: auto;after a floated element will cause the last element to fill the remaining space.Here is my sample.