HTML / CSS：将float-left元素展开为父级的剩余宽度 [英] HTML/CSS: Expanding a float-left element to remaining width of parent

问题描述

对于我的生活我不能想出这一点。我有一个具有特定宽度的容器div。和几个孩子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>  

让我们假设div和a和b的总宽度为50px。如何在不使用JavaScript的情况下制作#expandMe 150px？

解决方案

无法使用Javascript。

你可能会发现一些聪明的方式来实现视觉效果，但是没有可靠的方法来完成你所描述的。

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?

解决方案

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.

这篇关于HTML / CSS：将float-left元素展开为父级的剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！