前面我们层转载过一篇《CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例》的文章，那么今天呢，我们再来看一种三列布局–中间固定宽度，两边自适应宽度。比如我们在做一个网站Banner时，有时候需要让中间固定一个宽度，然后两侧填充成相同或不同的样式。这时，我们就可以用到这种布局。
下面我们一起来看这种布局方法的实现过程，先来看html代码：
<div id="left">
<div class="inner">left</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">right</div>
</div>这种方法也是借助于负的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;
}参考文章：http://www.w3cplus.com/css/layout-column-three
本文共 1 个回复