CSS 2 列のレイアウト_html/css_WEB-ITnose

レイアウトでは、多くの場合 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;}

このようにして、目的の効果は次の図に示すようになります。 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