CSS两列布局_html/css_WEB-ITnose

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

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

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

css代码如下：

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

其中css代码如下：

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

该程序完整代码位置： http://runjs.cn/code/xyhyg7tv