CSS三栏布局

有这样一种情况，在两列布局的基础上，将列的数量改为三栏。其中左右两列的宽度固定，中间部分的宽度随着浏览器宽度变化而变化。

首先，我们还是介绍一下传统的方法，就是利用了margin取负值的技巧。

代码如下：

<!--三列布局，左右侧固定宽度，中间自适应--><p>三列布局</p><div class="body"><div class="left background-color-red height-60 width-1">middle</div><div class="left background-color-blue height-60 width-300 margin-left--1 relative right-300 ">left</div><div class="left background-color-yellow height-60 width-300 margin-left--300 relative left-300">right</div></div>

CSS代码如下：

.margin-left--1 {margin-left:-100%;}.margin-left--300 {margin-left:-300px;}.body {padding:0 300px 0 300px;min-width: 300px;}.relative {position:relative;}.left-300 {left:300px;}.right-300 {right:300px;}

分析可以得出，未设置margin-left时，三个div效果如下：

通过设置左div的margin-left为-100%后，左div就向上移动到了中间div的左边，再设置右div的margin-left为负的右div宽度，就可以得到如下效果：

这个时候看似完成了，其实是不对的，因为左右两个div其实是挡在了中间div的前面。所以还需要将三个div的父亲div设置如下：

.body {padding:0 300px 0 300px;min-width: 300px;}

再设置左右的相对位置即可。

当然，同样可以使用CSS3的盒布局方式来完成该布局，和两列布局一样，都利用了box-flex属性，代码如下：

<p>三列布局盒布局版</p><div class="box"><div class="background-color-black height-60 width-300"></div><div class="background-color-blue height-60 flex"></div><div class="background-color-red height-60 width-300"></div></div>

css代码为：

.box {display: box;display: -webkit-box;}.flex {-webkit-box-flex: 1;}

完整代码位置如下：http://runjs.cn/code/buqqucas