CSS三欄布局的四種方法

總括：不管是三欄布局還是兩欄布局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄布局什麼是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄布局的四種方法，並介紹了它的使用場景。

年華一去不復返，事業放棄再難成。

所謂三欄布局就是指頁面分為左中右三部分然後對中間一部分做自適應的一種布局方式。

html**如下:

class="left">leftdiv>
class="main">maindiv>
class="right">rightdiv>
複製**

css**如下：

//簡單的進行css reset body,html //左右絕對定位 .left,.right .left .right //中間使用margin空出左右元素所佔據的空間

.main複製**

該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。

html**如下：

//注意元素次序
class="main">maindiv>
class="left">leftdiv>
class="right">rightdiv>
複製**

css**如下：

//習慣性的css reset body,html //父元素body空出左右字段 body //左邊元素更改 .left //中間部分 .main //右邊元素定義

.right 複製**

html**如下：

class="main">
class="inner">
main
div>
div>
class="left">leftdiv>
class="right">rightdiv>
複製**

css**如下：

//css reset body,html body .left .main .right //新增inner元素

.inner 複製**

聖杯布局實際看起來是複雜的後期維護性也不是很高，在**ued的**下，出來了一種新的布局方式就是雙飛翼布局，**如上。增加多乙個div就可以不用相對布局了，只用到了浮動和負邊距。和聖杯布局差異的地方已經被注釋。

html**如下：

//注意元素次序
class="left">leftdiv>
class="right">rightdiv>
class="main">maindiv>
複製**

css**如下：

//css reset body,html //左欄左浮動 .left //中間自適應 .main //右欄右浮動

.right 複製**

這種方式**足夠簡潔與高效，也容易理解

四種方法其實只有聖杯布局和雙飛翼布局較難理解，但實際上理解了聖杯布局，雙飛翼布局自然就理解了。