css - 让 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 顺序和宽度 - 与此相同的概念并且工作得很好。