CSS聖杯布局

        本文與之前《css雙飛翼布局》一文有些相似，在HTML結構上他們可以說是相同的。樣式主要表現為浮動+負邊距+定位。

       在《css雙飛翼布局》中，為了排開左右兩邊遮擋main元素的地區，是給main又添加了一個子項目，用子項目來控制main所要顯示內容的寬度與位置，這是一個不錯的方法，但從結構上來講，我們是憑空添加了一個空的標籤，這並不理想。

       後來在The Web-Arsenal一文中發現了一種妥善的解決方案，即標題中的CSS聖杯布局。

       整體的思路跟《css雙飛翼布局》是致的，只是後來並沒有給main添加子項目，而是利用相對定位來實現效果。

HTML

<div class="wrap">

<div class="main">maindiv>

<div class="left">left</div>

<div class="right">right</div>

</div>

 

CSS

.wrap {padding:0 100px 0 120px; overflow;hidden; zoom:1; }

.main,.left,.right { float:left; height:200px; }

.main { width:100%; background:#eee; }

.left {width:120px; margin-left:-100%; background:#ace;position:relative; left:-120px; }

.right{width:100px; margin-left:-100px; background:#f50; position:relative; right:-100px;  }

 

解析：首先給外圍div.wrap設定一個左右padding值（這個值要與左右兩邊寬度對等哦），來固定div.main的範圍，然後在原有基礎上將div.left div.right分別設定相對定位，再用left、right的位移來控制各自的顯示位置，讓left與right剛好能夠填補左右兩邊的空白，以達到效果。但是在IE6下面顯示並不如意，你會發現left不見了……這時，可以單獨針對left在IE6下面重寫樣式：

.left{ left:100px; } 

 

注意：left:100px   這裡的left(100px) = width(right) = 100 【這裡可以根據情況設定寬度值，只要滿足公式就行】

不要問我為什麼，其實我也不曉得，誰讓IE6是後媽養大的，比較怪異呢。但能肯定的是這種辦法可以可以解決問題！

 

【另外一點值得說明的是，聖杯布局只有對左右兩邊寬度為固定像素值的元素才會生效，百分比是無效的。因為元素的寬度為百分比，他是根據父級的寬度來計算的，而這裡，我們給父級設定了 padding值（寬度不明確），如果再給子左右兩邊設定百分比寬度，那就無法精確計算了。】

 

具體可參考：

http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b