使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的順序和寬度 - 與此相同的概念，並且工作得很好。