css中間固定寬度，兩邊自適應寬度

之前看到的很多布局都是兩邊固定寬度，但是中間自適應，實現方式有幾種，可以用absolution布局，float布局或者用負margin解決，下面我用了float...

html部分:

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

css部分:

#left,
#right {
float: left;
width: 220px;
height: 200px;
background: blue;
}
        
#right{
float: right;
}
        
#main {
margin: 0 230px;
background: red;
height: 200px;
}

下面還是說下重點的，中間固定寬度，兩邊自適應寬度

    <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了，大家可以看下css代碼：

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

上面這種可以用CSS3的flex布局解決，但是還有些瀏覽器不支持

<div class="grid">
  <div class="col fluid">
    ...
  </div>
  <div class="col fixed">
    ...
  </div>
  <div class="col fluid">
    ...
  </div>
</div>

.grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
}
.fixed {
  width: 400px;
}