使用基於網格的設計的最大寬度和最小寬度的彈性佈局

我想要開發4列布局（除了使用頁面的全部可用寬度的母體和頁腳），使得最右邊的列固定在200px和其他流體受到min-width = 960px和max-width = 1216px的影響。使用基於網格的設計的最大寬度和最小寬度的彈性佈局

所以這意味着只要瀏覽器窗口大於960且小於1216像素寬，佈局就像液體佈局一樣。一旦瀏覽器窗口大於1216，它將作爲固定佈局，寬度= 1216px，頁面位於瀏覽器視口中。如果瀏覽器窗口縮小到小於960像素，底部的水平滾動條會出現，因爲最小寬度是960像素。

我喜歡開發網站佈局的網格系統（例如http://960.gs/）。

在我的網頁的文檔類型是<!DOCTYPE html>（又名HTML5 DOCTYPE）

該解決方案應該爲IE 6 7 8 9和FF，Safari瀏覽器，鉻，歌劇工作。

希望這可以說明我在找什麼。

根據上面給出的條件，這個問題的解決方案是什麼？

我研究了谷歌，但找不到任何解決方案。我遇到了像最大寬度但沒有網格系統的3列解決方案，看起來太笨拙。

後來我必須添加對小屏幕（移動設備）的支持，這將需要設置一些列來顯示：無，並通過使用媒體查詢堆疊其他列，但首先我需要解決上述問題。

來源

2011-01-17 ace

IE6有各種各樣的「最大寬度」黑客，你有沒有做過任何研究？你試過什麼了？我們不打算根據您的規格構建整個系統，這不是SO的工作原理。 – meagar

在一個不相關的說明中，960網格系統很愚蠢，違背了CSS的明確意圖 - 顯示與語義的解耦。 – meagar

我在IE7/8和最新版本的Chrome，Firefox，Opera，Safari中測試了這個。

因爲min-width和max-width，這不會在IE6中工作（@ meagar說） - 有大量資源在線詳細介紹黑客來解決這個問題。除非我的其他代碼對你是正確的，否則我不會花費精力去做這件事。另外，我對使用CSS網格系統沒有興趣。

Live Demo（具有較高右列）
Live Demo（具有較高流體列）

HTML：

<div id="container"> 
    <div id="header">header</div> 
    <div id="fluidColumnContainer"> 
     <div class="column">column 1</div> 
     <div class="column">column 2</div> 
     <div class="column">column 3</div> 
    </div> 
    <div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div> 
    <div id="footer">footer</div> 
</div>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    margin: 0 auto; 
    min-width: 960px; 
    max-width: 1216px; 
    overflow: auto 
} 
#fluidColumnContainer { 
    padding: 0 200px 0 0 
} 
#fixedColumn { 
    width: 200px; 
    float: right 
} 
.column { 
    float: left; 
    width: 33% 
} 
#header { 
    height: 90px 
} 
#footer { 
    height: 90px; 
    clear: both 
}

來源

2011-01-17 15:02:55 thirtydot

這個設計看起來非常乾淨，但是它的代價是，在你開始在這些列周圍添加邊距和/或填充邊框後，它不起作用，這是生產系統需要做的事情！ – ace

此外，它不是基於網格系統，但如果我有工作和靈活的設計以及乾淨的設計，我可以忘掉網格系統。 – ace

通過不工作我的意思是在我爲所有列添加邊距並將一些內容添加到中間列之後，第3列進入第一列之下！ – ace

使用基於網格的設計的最大寬度和最小寬度的彈性佈局

回答

相關問題