三種實現左右固定，中間自適應的三欄佈局方式

目前爲止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。這些方法簡潔實用，且無兼容性問題。

 

---

 

1、絕對定位法：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。因而實現了三欄自適應佈局。

首先須要三個div，將左右兩邊的div的position設置爲absolute，左右設置爲相等固定寬度，在這裏設置爲200px，而且左邊div的top值爲0，left值爲0，同理右邊top值爲0，right值爲0。而後設置中間div的樣式，將中間div的margin-left和margin-right設置爲左右兩邊的固定寬200px。如下是簡單的佈局：

 

 

?

1 2 3 4 5

< body >      < div id="main"></ div >      < div id="left"></ div >      < div id="right"></ div > </ body >

 

下面就是關鍵的css代碼：

 

?

1

?

1 2 3

<style type= "text/css" >      #main { margin : 0 200px ; background : red ;}      # left { position : absolute ; top : 0 ; left : 0 ; width : 200px ; background : blue ; height : 100% ;} <br>    # right { position : absolute ; top : 0 ; right : 0 ; width : 200px ; background : green ; height : 100% ;}<br> </style>

這種方式三個div的順序能夠任意改變。

此方法的優勢在於：理解容易，上手簡單，受內部元素影響而破壞佈局的機率低，就是比較經得起折騰。
缺點在於：若是中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到必定程度，會發生層重疊的狀況。

---

 

2、自身浮動法：左欄左浮動，右欄右浮動，中間欄放最後。

如下是佈局代碼：

?

1

?

1 2 3 4 5

< body >      < div id="left"></ div >      < div id="right"></ div >      < div id="main"></ div > </ body >

下面是css樣式代碼：

 

?

1 2 3 4 5

<style type= "text/css" >      #main { margin : 0 200px ; background : red ;}      # left { float : left ; width : 200px ; background : blue ; height : 100% ;}      # right { float : right ; width : 200px ; background : green ; height : 100% ;} </style>

這種方式須要注意三個div的順序，左右兩欄的順序不分前後，可是中間一欄必須放在最後。

此方法的優勢是：代碼足夠簡潔與高效
缺點是：中間主體存在剋星，clear:both屬性。若是要使用此方法，需避免明顯的clear樣式。　　

---

 

3、margin負值法：左右兩欄均左浮動，左右兩欄採用負的margin值。中間欄被寬度爲100%的浮動元素包起來。

下面是佈局代碼：

?

1

?

1 2 3 4 5 6 7

< body >     < div id="main">         < div class="content"></ div >     </ div >     < div id="left"></ div >     < div id="right"></ div > </ body >

下面是css樣式代碼：

?

1 2 3 4 5 6

<style type= "text/css" >     #main { float : left ; width : 100% ;}     .content { margin : 0 200px ; height : 100% ; background : red ;}     # left { float : left ; width : 200px ; margin-left : -100% ; background : blue ;}     # right { float : left ; width : 200px ; margin-left : -200px ; background : green ;} </style>

左右兩欄div的順序不分前後，可是主體部分div要放前面。

此方法的優勢在於：三欄相互關聯，可謂真正意義上的自適應，有必定的抗性——佈局不易受內部影響。缺點在於：相對比較難理解些，上手不容易，代碼相對複雜。出現百分比寬度，過多的負值定位，若是出現佈局的bug，排查不易。