php2个按钮并排自适应,三列布局之中间固定宽度，两边自适应宽度

前面我们层转载过一篇《CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例》的文章，那么今天呢，我们再来看一种三列布局–中间固定宽度，两边自适应宽度。比如我们在做一个网站Banner时，有时候需要让中间固定一个宽度，然后两侧填充成相同或不同的样式。这时，我们就可以用到这种布局。

下面我们一起来看这种布局方法的实现过程，先来看html代码：

left

this is main content

right

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

#left,

#right {

float: left;

margin: 0 0 0 -601px;

width: 50%;

}

#main {

width: 1200px;

float: left;

background: green;

}

.inner {

padding: 10px;

}

#left .inner,

#right .inner {

margin: 0 0 0 601px;

background: orange;

}