本文與之前《css雙飛翼布局》一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動+負邊距+定位。
在《css雙飛翼布局》中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們是憑空新增了乙個空的標籤，這並不理想。
後來在the web-arsenal一文中發現了一種妥善的解決方法，即標題中的css聖杯布局。
整體的思路跟《css雙飛翼布局》是致的，只是後來並沒有給main新增子元素，而是利用相對定位來實現效果。
html
maindiv>
left
right
css
.wrap
.main,.left,.right
.main
.left
.right
解析：首先給外圍div.wrap設定乙個左右padding值（這個值要與左右兩邊寬度對等哦），來固定div.main的範圍，然後在原有基礎上將div.left div.right分別設定相對定位，再用left、right的位移來控制各自的顯示位置，讓left與right剛好能夠填補左右兩邊的空白，以達到效果。但是在ie6下面顯示並不如意，你會發現left不見了……這時，可以單獨針對left在ie6下面重寫樣式：
.left
注意：left:100px 這裡的left(100px) = width(right) = 100【這裡可以根據情況設定寬度值，只要滿足公式就行】
不要問我為什麼，其實我也不曉得，誰讓ie6是後媽養大的，比較怪異呢。但能肯定的是這種辦法可以可以解決問題！
【另外一點值得說明的是，聖杯布局只有對左右兩邊寬度為固定畫素值的元素才會生效，百分比是無效的。因為元素的寬度為百分比，他是根據父級的寬度來計算的，而這裡，我們給父級設定了 padding值（寬度不明確），如果再給子左右兩邊設定百分比寬度，那就無法精確計算了。】
具體可參考：
CSS 布局3 聖杯布局
聖杯布局是有 的工程師提出，巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過，使用浮動特性，實現三列布局，但是使用div布局，有乙個問題，那就是內容區，在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路，實現乙個內容區渲染在前的三列布局。1 負邊...
CSS經典布局 聖杯布局
廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...
css布局之聖杯布局
聖杯布局 都為了實現乙個兩側寬度固定，中間寬度自適應的三欄布局。中間先載入渲染 實現思路 使用float布局框架 用margin為負值 position relative定位 優點 1 相容性好，相容若有主流瀏覽器，包括萬惡的ie6 2 可以實現主要內容的優先載入 實現 如下 div class c...