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