CSS两列布局

标签：

在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？

传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下：

		<!--两列布局，其中左侧固定，右侧自适应-->
		<div class="left background-color-red height-60 width-300"></div>
		<div class=" background-color-black height-60 margin-left-301 "></div>

.color-blue {
	color:blue;
}
.color-yellow {
	color:yellow;
}
.background-color-blue {
	background-color: blue;
}
.background-color-black {
	background-color:black;
}
.background-color-red {
	background-color:red;
}
.background-color-yellow {
	background-color:yellow;
}
.height-60 {
	height:60px;
}
.border-color-red {
	border: 2px solid #ff0000;
}
.left {
	float:left;
}
.right {
	float:right;
}
.font-size-20{
	font-size: 20px;
}
.line-height-1_5{
	line-height: 1.5;
}
.width-1 {
	width:100%;
}
.width-auto {
	width:auto;
}
.width-300 {
	width:300px;
}
.width-960 {
	width:960px;	
}
.width-100 {
	width:100%;
}
.inline-block {
	display: inline-block;
}
/*第一种水平居中方式*/
.center-1 {
	margin: 0 auto;
}
/*第二种水平居中方式*/
.center-2 {
	position:absolute;
	left:50%;
	margin-left:-480px;
}
.margin-left-301 {
	margin-left:301px;
}

在CSS3推出的盒布局中，可以使用更加简便的方法来更加灵活的控制这样的布局需求，就是利用了box-flex属性，代码如下：

		<!--两列布局，其中左侧固定，右侧自适应-->
		<div class="box"><!--盒布局-->
			<div class="background-color-black height-60 width-300"></div>
			<div class="background-color-red height-60 flex"></div>
		</div>

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

CSS两列布局

标签：

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