CSS：以最小/最大寬度爲中心，左邊流暢，右邊固定，源排序佈局

Question

標題說明它。我想，一個2列CSS佈局：

• 居中 - 的主要內容是在頁面上居中
• 具有固定的（像素）右列寬度
• 具有流體左欄 - 用完所有可用空間減去右邊的列寬
• 是源下令 - 左邊的列內容來自於HTML源
• 允許的最小寬度右欄內容之前 - 在我的例子760px
• 允許最大寬度 - 10 24px在我的示例中

如果窗口大於最大寬度，內容將以最大值爲中心在頁面上。如果窗口小於最大寬度，內容會填充頁面的100％，除非它小於最小寬度，這會使水平滾動條出現。

我願意使用一些次要的javascript來處理不支持這些屬性的瀏覽器的最小/最大寬度（我在看你IE6），但我同樣願意讓那部分的佈局降級。

它簡單地用表格簡化。我仔細研究了數百個示例佈局，沒有任何事情可以完成我所要求的所有事情，儘管有幾個接近。這個問題似乎得到了一個流暢的左列和源代碼相同的風格。我發現了幾個固定的左/流體右（與我想要的相反）的正確源順序的例子，或流體左/右固定沒有源排序，但不是兩者。

我不在乎它是否使用浮動或負邊距，但我想避免絕對定位。

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

我強烈建議您檢查一下CSS templates at Dynamic Drive。第五個下降應該是你正在尋找（流體固定）。只需將一個max-width和min-width添加到主容器元素，並且應該全部設置。這些都是很好的模板，可以用作頁面佈局的基礎。玩CSS是一個很好的學習浮標和定位的好方法，它在web開發的早期幫助了我。

Answer 2

你在找這樣的事嗎？ （緣陰性+浮子+正確源順序+右固定）

http://blog.html.it/layoutgala/LayoutGala23.html

在索引頁更多佈局：http://blog.html.it/layoutgala/

然後只是追加最小/最大寬度到容器上。

Answer 3

我嘗試： http://www.ryankinal.com/fluid/

它完全不起作用，儘管這僅僅是因爲在非常小的窗口大小，我負利潤率可能會導致內容脫落的頁面。這裏的理論：

在在容器的100％一定百分比

左欄

1. 容器中，並向左浮動
2. 包裹在0％的寬度右列的浮式右包裝
3. 在固定右列（在我的例子100像素）（在我的例子200像素）寬度
4. 左欄和右列的寬度的一半的右列左右邊距

所以，右欄越大，內容越容易脫落。但是，這距離我在一個小時左右的時間內就已經接近了。由於將右列包裝在一個無關的div中並利用溢出：可見，這也有點冒失。

但他們是我的公爵（現在）。