（1）絕對定位法
該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
html**：
left
main
right
//簡單的進行css reset
body,html
//左右絕對定位
.left,.right
.left
.right
//中間使用margin空出左右元素所佔據的空間
.main
中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這裡設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去
把左層margin負100後，發現left上去了，因為負到出視窗沒位置了，只能往上挪
按第二步這個方法，可以得出它只要挪動視窗寬度那麼寬就能到最左邊了，利用負邊距，把左右欄定位
但由於左右欄遮擋住了中間部分，於是採用相對定位方法，各自相對於自己把自己挪出去，得到最終結果
html**：
//注意元素次序
main
left
right
css**：
//習慣性的css reset
body,html
//父元素body空出左右字段
body
//左邊元素更改
.left
//中間部分
.main
//右邊元素定義
.right
聖杯布局實際看起來是複雜的後期維護性也不是很高，在**ued的**下，出來了一種新的布局方式就是雙飛翼布局，**如下。增加多乙個div就可以不用相對布局了，只用到了浮動和負邊距。和聖杯布局差異的地方已經被注釋。
html**：
main
left
right
css**：
//css reset
body,html
body
.left
.main
.right
//新增inner元素
.inner
html**：
//注意元素次序
left
right
main
css**：
//css reset
body,html
//左欄左浮動
.left
//中間自適應
.main
//右欄右浮動
.right
CSS三欄布局的四種方法
總括 不管是三欄布局還是兩欄布局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄布局什麼是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，並介紹了它的使用場景。年華一去不復返，事業放棄再難成。所謂三欄布局就是指...
CSS三欄布局的四種方法
總括 不管是三欄布局還是兩欄布局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄布局什麼是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，並介紹了它的使用場景。年華一去不復返，事業放棄再難成。所謂三欄布局就是指...
CSS三欄布局的四種方法
1.絕對定位法 html 如下 left main right css 如下 簡單的進行css resetbody,html 左右絕對定位.left,right.left.right 中間使用margin空出左右元素所佔據的空間.main 該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含...