http://www.alistapart.com/articles/holygrail
這個(gè)翻譯的頁面版權(quán)歸greengnn所有，轉(zhuǎn)載請(qǐng)注明出處
第一步：創(chuàng)建一個(gè)結(jié)構(gòu)
xhtml開始于header, footer, and container
div id="header">/div>
div id="container">/div>
div id="footer">/div>
CSS先定義container，給將要加入的sideleft，和sideright留下個(gè)位置
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
我們的布局現(xiàn)在看起來是這樣的
圖1——?jiǎng)?chuàng)建框架
第二步：增加內(nèi)容元素
在第一步基礎(chǔ)上增加內(nèi)容元素
div id="header">/div>
div id="container">
div id="center" class="column">/div>
div id="left" class="column">/div>
div id="right" class="column">/div>
/div>
div id="footer">/div>
然后分別定義widths和float 讓元素排列在一條線上，還有清除footer的浮動(dòng)對(duì)齊
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
這里給center元素定義了100% width，讓它占滿montainer的可用空間，現(xiàn)在的布局變成了這樣
圖2：增加內(nèi)容元素
第三步：把left放到正確的位置
要把left放到正確的位置，我們分兩步
1.讓left和center在同一水平線
#left {
width: 200px; /* LC width */
margin-left: -100%;
}
看看效果
圖3——left移動(dòng)完成一半
2.用相對(duì)定位，把left繼續(xù)移動(dòng)到正確的位置
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
讓left距離他右邊元素center 200px后，行了，left終于到自己位置上了
圖4——left到了自己的位置
第四步：讓right也到自己的正確的位置上
從上圖看，我們只需要把right推倒container的padding-right里面,看看怎么做
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
好了，現(xiàn)在元素們都正確歸位了。
圖5——right到了自己正確的位置
第五步：解決bug讓布局更完美
如果瀏覽器窗口大小變更，center就變得比left小了，完美的布局就被打破，我們給body 設(shè)置一個(gè)min-width
來解決這個(gè)問題，因?yàn)镮E不支持他，所以不會(huì)有負(fù)面影響，調(diào)整如下
body {
min-width: 550px; /* 2x LC width + RC width */
}
這時(shí)在IE6（完全打開的窗口）下，left元素具體左側(cè)又太遠(yuǎn)了，再調(diào)整
* html #left {
left: 150px; /* RC width */
}
這些大小調(diào)整是根據(jù)上面已經(jīng)定義的寬度來的，你調(diào)整的時(shí)候也要根據(jù)自己的實(shí)際情況。
現(xiàn)在增加padding
內(nèi)容文字貼著容器的邊，相信你看得時(shí)候，不會(huì)很舒服，調(diào)整一下
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
當(dāng)然不能只增加left就算完事，要給一系列元素都必須加上，也要調(diào)整增加padding，帶來的新的bug，調(diào)整如下
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
header和footer的padding可以隨意增加，這里就不提了，還有長度單位用em更具親和力（em可以讓用戶使用瀏覽器來調(diào)整自己需要的字體大?。?br>
但是不能混合使用，選擇em和px的時(shí)候明智些,察看效果
元素等高問題
采用http://www.positioniseverything.net/articles/onetruelayout/equalheight
有人翻譯過來的：http://www.blueidea.com/tech/web/2006/3210.asp
里提到的方法，就不具體解釋了。
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
再解決opera 8的bug，代碼調(diào)整如下
div id="footer-wrapper">
div id="footer">/div>
/div>
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}
