css佈局兩邊固定中間自適應的四種方法

第一種：左右側採用浮動 中間採用margin-left 和 margin-right 方法。

代碼以下：

 

<div style="width:100%; margin:0 auto;"> 

       <div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>

       <div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>

       <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div>

    </div>

第二種：左右兩側採用絕對定位 中間一樣採用margin-left margin-right方法：

第三種負的margin

使用這種方法就稍微複雜了一些了，使用的是負的margin值，並且html標籤也增長了，先來看其代碼吧：

<div id="main">
 <div id="mainContainer">main content</div>
</div>
<div id="left">
 <div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
 <div id="rightContainer" class="inner">right</div>
</div>

從上面的Html代碼中咱們能夠明顯得看出，在main、left、right三個div內部我都增長了一個div，那麼他們起了什麼樣的做用呢，你們從下面的CSS中能夠明顯的體會出來：

 

#main {
 float: left;
 width: 100%;
}
#mainContainer {
 margin: 0 230px;
 height: 200px;
 background: green;
}
#left {
 float: left;
 margin-left: -100%;
 width: 230px
} 
#right {
 float: left;
 margin-left: -230px;
 width: 230px;
} 
#left .inner,
#right .inner {
 background: orange;
 margin: 0 10px;
 height: 200px;
}

簡單的說一下其實現原理，這種方法佈局，主要運用的是負的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。你們能夠看看其效果是否是和第二種方法同樣：

能夠看到margin-left:-900px是表明right左邊的開頭距離最右邊爲900px,當爲-230px時，正好佈局成功

下面是簡化版

第四種也是利用負的margin,待定考慮，不常常遇到

上面囉嗦完了常見的佈局方法，接着進咱們一塊兒來看另一種三列布局中間固定寬度，兩邊自適應寬度。對於我來講，這是一種不多碰到的佈局方法，不知道你們有何體會，那麼下面咱們一塊兒來看這種佈局方法的實現過程，一樣先來看html代碼：

<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>

　　這種方法也是藉助於負的margin來實現的，首先咱們在中間列定好固定值，由於此值是不會在改變的，接着對其進行左浮動；那麼關鍵地主是在左右邊欄設置地方，這種方法是將其都進行50%的寬度設置，並加上中負的左邊距，此負的左邊距最理想的值是中間欄寬度的一半加上1px，好比說此例中是「540px/2+1」也就是說他們都有一個「margin-left: -271px」，這樣一來，左右邊欄內容沒法正常顯示，那是由於對他們進行了負的左邊距操做，如今只須要在左右邊欄的內層div.inner將其拉回來，就OK了，你們能夠看下在的代碼：

#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
}
#main {
width: 540px;
float: left;
background: green;
}
.inner {
padding: 20px;
}
#left .inner,
#right .inner {
margin: 0 0 0 271px;
background: orange;
}

　　具體效果以下：

　　這種方法若是在IE下會存在佈局混亂的bug，你能夠將div#right和div#left中的width值稍做修改：

#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
*width: 49.9%;
}

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