聖杯レイアウトとダブルフライ翼レイアウト、flexレイアウトで両側固定幅中間適応レイアウトを実現

聖杯レイアウト、ダブルフライ翼レイアウトの2つのレイアウトの機能は同じで、両側の幅が固定され、中間の幅が適応した3つの欄レイアウトです.同じ点があります

両側の幅固定、中間幅適応

の中間の1つの欄はDOM構造の上で2つの側の欄より優先して、優先的に中間の欄

をレンダリングするために

は、3列のいずれかの列を最高列

と呼ぶことを許可する.

追加のdivラベル小包

のみ必要です.
聖杯レイアウト
1、DOM構造

	
 center 
	
 left 
	
 right 

整体结构就是主体由container包裹着center，left，right三个部分，将center放在最前面，以便先行渲染

2、CSS样式

1、设定左右侧栏宽度为200px，所以container左右两边要先设置padding:0 200px;以便侧栏待会给侧栏存放位置

.container{ padding: 0 200px; }

2、containerの3つの要素に幅、背景色、フローティングを設定する

.column{
	float:left;
	width:200px;
	height:200px;
	background:pink;
}
.center{
	width:100%; 
	background:skyblue;
}

3、センターの后ろに幅を100%与えるようにして幅を适応することができます.また、彼の幅が100%なので、leftとrightが下に押し込まれました.marginを利用して2つのサイドバーを前に残した位置に置きます.ここのleftは-100%であることに注意してください.このサイドバーを一番左に置くことができます.

.left{ margin-left:-100%; }
.right{ margin-right:-200px;}

4、今左のサイドバーは完全に適当な位置に着いていません.最初はcontainerがpadding-left:200px;を与えたので、位置決め方法で正確な位置に置く必要があります.

.left{ margin-left:-100%; position:relative; right:200px;}

これでレイアウトは完了しましたが、ページの最小幅を設定する場合は、左右の幅に加えてleftがrelativeで位置決めされているので、左側の内側の余白を加えるので、最小幅は少なくとも200+200+200(2つのサイドバーの幅+左内側の余白の幅)に設定する必要があります.
すべてのコード

// css
.header,.footer{
	width:100%;
	height:44px;
	background:#999;
}
.container{
	padding: 0 200px;
}
.column{
	float:left;
	width:200px;
	height:200px;
	background:pink;
}
.left{
	margin-left:-200px; 
	position:relative;
	right:100%;
}
.center{
	width:100%; 
	background:skyblue;
}
.right{
	margin-right:-200px; 
}

// html


	
 center 
	
 left 
	
 right 

双飞翼布局

1、DOM结构

双飞翼布局的DOM结构跟圣杯布局的区别是container只包住center，另外left、right跟container同级，column放在container元素上。

2、CSS样式

基本的css代码跟圣杯布局差不多，先设置列的宽度和浮动，然后为两侧边栏预留空间，最后多一个给footer添加浮动。

.header,.footer{
	width:100%;
	height:44px;
	background:#999; 
}
.container{
	width:100%;
}
.column{
	float:left;
	height:400px;
}
.center{
	height:100%;
	margin-left:200px; 
	margin-right:200px; 
	background:skyblue;
}
.left{
	width:200px; 
	background: pink; 
	margin-left:-100%;
}
.right{
	width:200px; 
	background: pink; 
	margin-left:-200px;
}
.footer{
	clear: both;
}

ここでのleftは位置決めスタイルが与えられていないので、ページの最小幅を設定するには、両サイドの幅の和に設定するだけでよい
flexレイアウト
1、DOM構造
flexレイアウトのDOM構造は聖杯レイアウトと同じです

	
 center 
	
 left 
	
 right 

2、CSSスタイル

.container{
	display:flex;
}
.center{
	flex:1;
	height:200px;
	background:skyblue;
}
.left,.right{
	flex:0 0 200px;
	height:200px;
	background:pink;
}
.left{order:-1;}

flexレイアウトはよく使われていますが、問題があります.チェン一峰先生のflexレイアウトチュートリアル