圣杯布局与双飞翼布局还有flex布局实现两边固定宽度中间自适应布局

圣杯布局、双飞翼布局 这两个布局的功能都是相同的，都是两侧宽度固定，中间宽度自适应的三栏布局。
他们都有一些相同点：

1. 两侧的宽度固定，中间宽度自适应
2. 中间一栏在DOM结构上优先于两个侧栏，为了以便优先渲染中间栏
3. 允许三列任意一列称为最高列
4. 只需要一个额外的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里面的三个元素设置宽高、背景色和浮动

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

3、center后面要给宽度100%这样才可以自适应宽度，也由于因为他的宽度是100%，所以left和right挤到下面去了，所以利用margin将两个侧栏的放到之前预留的位置上，
注意这里的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(两个侧栏的宽度+左内边距的宽度)

全部代码

// 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布局教程