css中间固定宽度，两边自适应宽度

转载自：http://www.cnblogs.com/lgmcolin/archive/2013/05/29/3106579.html

之前看到的很多布局都是两边固定宽度，但是中间自适应，实现方式有几种，可以用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;
}