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;
}