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>

.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;
}

通过设置左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>

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

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

CSS三栏布局

标签：

原文地址：http://blog.csdn.net/mevicky/article/details/46318519