CSS三欄布局中間固定兩邊自適應寬度

**：w3cplus

今天早上在阿當大俠的編寫高質量前端**群中與幾位朋友一起**和學習了一種用div+css進行的三列（三欄）布局，而且是中間固定左右兩邊自適應寬度，聽起來蠻有意思的。因為以前只是碰到過，左右兩列固定而中間自適應的運用。於是思考一下馬上敲起了鍵盤自己實戰了一下，接著與大家一起測試，還是通過了各瀏覽器的考驗，為了方便自己以後好查閱，也想讓不知道的朋友一起學習一下這樣的布局，特整理了一下**，貼上來與大家一起分享和學習。

在講這種布局之前，我還想和大家一起回想一下三列布局中的另一種，就是左右兩列固定，中間自適應寬度。這種布局方法，網上問問ｇ爸和度娘一定會有一大堆，但我還是要重複說說，方便自己今後查閱，記性太差，沒辦法。別的先不說了，就開始進入主題吧。對於兩邊固定中間一列自適應的布局方法，我最早使用的是絕對定位法。先看**

id="left">左邊欄div>
id="right">右邊欄div>
id="main">主內容div>比如說，我左右兩列都是220px，中間寬度自適應，那麼我們使用絕對定位實現的方法是這樣的
html,body
#left,
#right
#left
#right
#main

這種方法是最簡單，也是麻煩最多的，如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。我個人現在不在建議使用這種布局。

第二種方法採用的是浮動布局

這種方法和上面的絕對定位方法很相似，只不過這裡採用的是浮動，而不是絕對定位，先來看其html**

id="left">left div>
id="right">rightdiv>
id="main">miandiv>
#left,
#right
#right
#main

是不是好簡單一種方法呀，大家可以在本地機子上動手測試一下，效果如下所示：

第三種方法：負的margin

使用這種方法就稍微複雜了一些了，使用的是負的margin值，而且html標籤也增加了，先來看其**吧

id="main">
id="maincontainer">main contentdiv>
div>
id="left">
id="leftcontainer"
class="inner">left contentdiv>
div>
id="right">
id="rightcontainer"
class="inner">rightdiv>
div>從上面的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**：

id="left">

class="inner">this is left sidebar contentdiv>

div>

id="main">

class="inner">this is main contentdiv>

div>

id="right">

class="inner">this is right siderbar contentdiv>

div>這種方法也是借助於負的margin來實現的，首先我們在中間列定好固定值，因為此值是不會在改變的，接著對其進行左浮動；那麼關鍵地主是在左右邊欄設定地方，這種方法是將其都進行50%的寬度設定，並加上中負的左邊距，此負的左邊距最理想的值是中間欄寬度的一半加上1px，比如說此例中是"540px/2+1"也就是說他們都有乙個"margin-left: -271px",這樣一來，左右邊欄內容無法正常顯示，那是因為對他們進行了負的左邊距操作，現在只需要在左右邊欄的內層div.inner將其拉回來，就ｏｋ了，大家可以看下在的**：

#left,

#right

#main

.inner

#left

.inner,

#right

.inner

具體效果如下：

這種方法如果在ie下會存在布局混亂的bug，你可以將div#right和div#left中的width值稍作修改：

#left, #right

這樣一來，在ie下也就安全了。

實現這種效果的方法可能有很多，希望大家有更好的方法能一起分享一起學習。

2023年09月26日更新——css3 flexbox

前面介紹了三種方法，實現l1f2l3

布局效果，也就是第一列和第三列自適應寬度，中間一列固定寬度。今天在給大家推薦一種css3實現這種布局的方法，採用css3的flexbox，這種方法不足之處就是只能在部分瀏覽器中使用，詳細的請看下面**：

html結構

class="grid">
class="col fluid">
...div>
class="col fixed">
...div>
class="col fluid">
...div>
div>css**
.grid
.col
.fluid
.fixed

效果如下面的demo所示：

CSS三欄布局中間固定兩邊自適應寬度

CSS 三欄布局，兩邊固定，中間自適應

三欄布局（兩邊固定，中間自適應）

三欄布局（兩邊固定，中間自適應）

CSS三欄布局 中間固定兩邊自適應寬度

CSS 三欄布局，兩邊固定，中間自適應

三欄布局（兩邊固定，中間自適應）

三欄布局（兩邊固定，中間自適應）

相關推薦

CSS三欄布局中間固定兩邊自適應寬度