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下也就安全了。