-
在講這種布局之前，我還想和大家一起回想一下三列布局中的另一種，就是左右兩列固定、中間自適應寬度。這種布局方法，網上問問g爸和度娘一定會有一大堆，但我還是要重複說說，方便自己今後查閱，記性太差，沒辦法。別的先不說了，就開始進入主題吧。
第一種方法：
對於兩邊固定中間一列自適應的布局方法，我最早使用的是絕對定位法。先看**：
左邊欄右邊欄
主內容比如說，我左右兩列都是220px，中間寬度自適應，那麼我們使用絕對定位實現的方法是這樣的：
html,
body
#left,
#right
#left
#right
#main
這種方法是最簡單，也是麻煩最多的，如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。我個人現在不再建議使用這種布局。
第二種方法：採用的是浮動布局
這種方法和上面的絕對定位方法很相似，只不過這裡採用的是浮動，而不是絕對定位，先來看其html**：
left
right
mian
是不是好簡單一種方法呀，大家可以在本地機子上動手測試一下，效果如下所示：
第三種方法：負的margin
使用這種方法就稍微複雜了一些了，使用的是負的margin值，而且html標籤也增加了，先來看其**吧：
main content
left content
right
從上面的html**中我們可以明顯得看出，在main、left、right三個div內部我都增加了乙個div，那麼他們起了什麼樣的作用呢，大家從下面的css中可以明顯的體會出來：
#main
#maincontainer
#left
#right
#left .inner,
#right .inner
簡單的說一下其實現原理，這種方法布局，主要運用的是負的margin值。首先在div#main中我定了乙個100%寬度並進行左浮動，並且主內容是放在其內層div#maincontainer中，並在這個主內容層中需要進行乙個margin-left和margin-right設定，並且這兩個值是很有講究的，並不是可以隨便設定的，這兩個值需要等於左右兩列的寬度。我們此處是230px。左欄和右欄都使用負的margin值加上左浮動來布局，左欄是左浮動並加了乙個「margin-left: -100%」，這是因為div#left前面有乙個div#main，並且其寬度為100%，這樣一來在左欄定這個margin-left: -100%;剛好使左邊欄定位到頁面的最左邊；而右欄也進行左浮動，但其定義的「margin-left」也是負值，並且等於其自身的寬度230px；最後在div#left、div#right中加上乙個div.inner是為了更好的控制邊欄與主內容列之間的間距。比如說此例的10px。大家可以看看其效果是不是和第二種方法一樣：
上面囉嗦完了常見的布局方法，接著進我們一起來看另外一種三列布局中間固定寬度，兩邊自適應寬度。對於我來說，這是一種很少碰到的布局方法，不知道大家有何體會，那麼下面我們一起來看這種布局方法的實現過程，同樣先來看html**：
this is left sidebar content
this is main content
this is right siderbar content
這種方法也是借助於負的margin來實現的，首先我們在中間列定好固定值，因為此值是不會在改變的，接著對其進行左浮動；那麼關鍵地主是在左右邊欄設定地方，這種方法是將其都進行50%的寬度設定，並加上中負的左邊距，此負的左邊距最理想的值是中間欄寬度的一半加上1px，比如說此例中是「540px/2+1」也就是說他們都有乙個「margin-left: -271px」，這樣一來，左右邊欄內容無法正常顯示，那是因為對他們進行了負的左邊距操作，現在只需要在左右邊欄的內層div.inner將其拉回來，就ok了，大家可以看下在的**：
#left,
#right
#main
.inner
#left .inner,
#right .inner
具體效果如下：
這種方法如果在ie下會存在布局混亂的bug，你可以將div#right和div#left中的width值稍作修改：
#left,
#right
這樣一來，在ie下也就安全了。
實現這種效果的方法可能有很多，希望大家有更好的方法能一起分享一起學習。
CSS 三欄布局，兩邊固定，中間自適應
基於純float實現的三欄布局需要將中間的內容放在html結構的最後，否則右側會沉在中間內容的下側原理 元素浮動後，脫離文件流，後面的元素受浮動影響，設定受影響元素的margin值即可 基於絕對定位的三欄布局 注意絕對定位的元素脫離文件流，相對於最近的已經定位的祖先元素進行定位。無需考慮html中結...
三欄布局（兩邊固定，中間自適應）
我的答案 1 div class left 1 div 2 div class center 2 div 3 div class right 3 div 4 style text type css 5 div 6 left,right 7 center 8 style 網上答案 主要有定位，浮動和通...
三欄布局（兩邊固定，中間自適應）
我的答案 1 div class left 1 div 2 div class center 2 div 3 div class right 3 div 4 style text type css 5 div 6 left,right 7 center 8 style 網上答案 主要有定位，浮動和通...