使div填充剩余空间

Question

这个问题已被问过一百万次，但我似乎找不到我特定版本的解决方案。 这是我有的：

<div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

始终显示div1和div2，有时仅显示div3。 div2和div3有固定的宽度。 我希望div1填充div2和可能的div3没有占用的剩余空间。 我希望它们以从左到右的顺序出现（[div1] [div2] [div3]）。

有人能帮忙吗？

Answer 1

回答：

见作者： http ： //jsfiddle.net/C9Q3F/3/

<style>
    div { height:100px; }
    #div1 { background-color:red; }
    #div2 { background-color:blue; width:75px; float:right; }
    #div3 { background-color:green; width:100px; float:right; }
</style>
​
<div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</div>​

说明：

这个工作的原因是 - div的顺序改变了 - 所以它将div2和div3写入页面，两者都有固定的宽度，并且都float 。 因此，当写入div1 （现在是最后一个）时，默认的100％宽度将填充100％的可用宽度。 由于其他div已经占据了他们的空间，“可用宽度”就是剩下的。

对于其他情况（例如，最后一个div填充空间）：

如果你想让最后一个div填充剩下的空间而不是第一个，就像这个问题/答案一样，只需调整它就可以使用float:left; 而不是float:right; 并改变div的顺序和宽度 - 与此相同的概念，并且工作得很好。