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;

}