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

三栏布局——中间固定两边自适应宽度--负的margin(最佳)

  这种方法也是借助于负的margin来实现的，首先我们在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，比如说此例中是"1024px/2+1"也就是说他们都有一个"margin-left: -513px",这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来

代码：

html:

<div class="section1">
<div id="left1">
<div class="inner"></div>
</div>
<div id="mid1">
<div class="inner"></div>
</div>
<div id="right1">
<div class="inner"></div>
</div>

</div>

css:
.section1{
width: 100%;
height: 200px;
margin-top: 80px;
position: absolute;
}
#left1{
width: 50%;
height: 200px;
background-color: #609cfe;
float: left;
margin-left: -513px;
}
#mid1{
width: 1024px;
height: 200px;
background-image: url(../image/casebanner.png);
background-position: -133px 0;
float: left;
}
#right1{
width: 50%;
height: 200px;
background-color: #7eaffe;
float: right;
margin-right: -511px;
}
.inner {padding:20px;} 
#left1 .inner{
margin-left: 513px;
background-color: #609cfe;
}
#right1 .inner{
margin-right: 511px;
background-color: #7eaffe;
}