圣杯布局， 双飞翼布局

 

三列自适应
	左右两栏固定宽度
	中间实现自适

1）HTML结构中——先中间内容后侧边栏
圣杯布局，	- 2）两侧宽度固定，中间宽度设置100%
	- 3）中间内容和左右两侧分别加浮动 float:left;
	- 4) 将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到右边（margin-left: -右侧盒的宽度）
	- 5）通过父盒将左右盒子的位置露出来（在父盒上设置padding: 0 右侧盒子宽度 0 左侧盒子宽度）
	- 6）分别还原左侧盒和右侧盒
	* 将左侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为-左侧盒宽度；）
	* 将右侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为右侧盒宽度；）
	- 7）父盒容器设置最小宽度，防止中间列消失
	-->

### 实现步骤
双飞翼布局
	- 1）HTML结构中——先中间结构（主体结构中要有主体内容盒，主体内容盒里嵌套一个子盒）后侧边栏
	- 2）两侧盒子固定宽度，中间主体结构盒宽度100%；
	- 3）中间结构盒和左右两侧设置浮动 float: left;
	- 4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒宽度）
	- 5）在中间主体结构盒的子盒上设置margin值将中间内容露出来（margin: 0 右侧边宽度 0 左侧边宽度） -->