CSS 2列レイアウト

レイアウトでは、左の列が幅を固定し、右の列がブラウザの幅によって変化する2つの列が必要になります.どのように実現しますか?
従来の方法は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;
}

図のように、目的の効果を得ることができます.
CSS 3が発売したボックスレイアウトでは、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