CSS two column layout_html/css_WEB-ITnose

In layout, we often need to have two columns, where the left column has a fixed width and the right column changes as the browser width changes. How to achieve this?

The traditional method is to use float to float the left part, and then use margin to move the right part to the right to get the desired effect. The code is as follows:

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

The css code is as follows:

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

In this way, you can get the desired effect, as shown in the picture:

In the box layout introduced by CSS3, you can use a simpler method to more flexibly control such layout requirements, which is to use the box-flex attribute. The code is as follows:

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

The css code is as follows:

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

The complete code location of the program: http://runjs.cn/code/xyhyg7tv