樣式表很簡單，就是說你有乙個左邊的寬度為200px的列，右邊有乙個寬度為150px的列，中間的列自適應。核心的css**如下：
這種方式能夠相容現在的許多主流瀏覽器，例如：safari, opera, firefox, and (with the single-rule hack at the bottom) ie6.
這種方式是如何實現的呢？
這種方式很直接，id為container的div中間部分自適應，兩側適當填充，也就是左邊div布置在左側的填充位置，右邊的div在右側填充的位置，留下中間的div自適應。
讓我們一步步構建這種布局方式。
步驟1：建立乙個頁面框架。
我們讓左右兩列分別佔據container的兩側填充。
然後我們的布局就像這個：
步驟2：現在我們已經有了乙個基本框架，然後在各列新增個相同的class選擇器。
接下來我們新增合適的寬度，並且給它們新增浮動。我們需要為footer清除浮動，保證它在那些浮動列的下面。
注意，中間列的寬度設為100%是為了讓它和container的寬度保持一致。我們看到寬度設為100%，使得這種布局集中到了一塊。
由於中間列佔據了所有可用空間，左右兩列只得在它下面。
步驟三：首先我們為了讓左列越過中間列，給它乙個-100%的左距離；注意這個100%是中間列在container中的寬度，也就是中間列的寬度。
此時，左列佔據了一部分中間列的地方。此時情況如圖：
為了讓左列不佔據那個區域，我們使用相對定位，並用乙個右邊距，距離和左列的寬度一致。
現在左列已經在適當的位置了
步驟四：接下來的任務就只是讓右列出現在適當的位置了。實現這個，我們只需要把它放在container的右側填充位置，我們繼續使用負margin：
現在所有列都在合適的位置了
步驟五：如果瀏覽器調整詩圖大小，那麼中間列會顯得比左列小，那麼這種布局就會不相容。所以，給body設定min-width來保證列合適的出現，但是對於ie6不會出現上面那種情況，因此，即便它不支援min-width也沒問題。
當然，沒有任何布局方式能夠完美的被ie支援。使用負margin會使得左列不正常顯示，所以我們要讓它回到正常位置，如下方式：
ok，到這裡。我已經把主要內容呈現給大家了，對於我這種英語渣的人，也是用了不短時間吶。堅持看到這，有木有被樓主的蹩腳英語震撼到呢！勿噴啊，這是俺第一次，還望不幸看到的，頂一下，支援下啊，感謝。
float詳解 聖杯布局
雖然現在有了flex彈性盒子模型，很多布局效果都可以通過flex盒子來實現，但由於flex盒子模型的相容性不容樂觀 ie至少要10才能支援flex，所以還是很有必要學習float流式布局的 正常的塊級元素的布局是這樣的 文字代表元素的float屬性 對於float布局要記住 1.如果浮動元素的上乙個...
頁面布局詳解 聖杯 雙飛翼 彈性布局
聖杯布局和雙飛翼布局是頁面布局的常用布局方式。兩者都是為了實現兩側寬度固定，中間寬度自適應的三欄布局，但兩者在實現方式上有一定的差別,不過都遵循了以下要點 實現方式 三者都設定向左浮動。設定中間寬度為100 設定容器的padding值給左右兩部分留出空間。左部分 設定margin left為 100...
聖杯式布局
作者森西悠然 關注 2016.07.17 18 58 字數 1500 閱讀 3234 喜歡 32 愛生活，不愛黑眼圈 稍微了解前端的人都知道，聖杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂html結構又能體現出你對 iv css布局的掌握，畢竟我們學習css主要就是為了更好地布局帶來...