固定+流體佈局

Question

如何創建2列布局，1列固定寬度，另一列佔用剩餘空間？

Please see this demo。

最初，我嘗試了一個流體佈局，但不喜歡左欄變得太小，所以我想保持它在一個恆定的寬度。

我試過setting the 2nd column's margin-left equal to the width of the first column，但這意味着第二列沒有擴展到所有可用空間。它只佔用盡可能多的空間，這不足以保持佈局的吸引力。

如何讓#right列填充#container中所有剩餘空間？

Answer 1

最簡單的方法是display:table。這可能不是最好的方式，但它有效。你可以看到一個小提琴我與你的代碼中創建的位置：在你的CSS

http://jsfiddle.net/hp8Vg/1/

您也可以使用計算（），但不是作爲廣泛支持。

Answer 2

您可能要考慮使用media queries根據視口大小觸發其他CSS規則。

這應該做你問什麼：

@media only screen and (max-width: 960px) { 

    #right { float: none; width: 100%; } 

    #left { float: none; } 


}