css布局——双飞翼布局和圣杯布局

双飞翼布局和圣杯布局都将界面分为左中右三部分，中间部分是主体部分。

圣杯布局实现代码：

 

	
	
	



	
main
	
left
	
right

解释：

 

1.main写在最前面（for 加载时先加载main部分）,用margin将left拉到main的左边，将right拉到它的右边，注意此时left和right是覆盖main部分的

2. main部分的宽度是100%，这说明它会占满一行，为了空出空间给left和right，需要对他们三外面的容器test进行设置：padding：0 400px 0 200px;

3. 接下来把空出来的部分分配给left和right，这里用到相对定位。.left{position:relative;left:-200px;}

双飞翼布局实现代码如下：

 

	
	
	



	
main
	
left
	
right

解释：

 

双飞翼布局跟圣杯布局实现的目标相同，实现手法区别主要在于后面的main定位。

当left和right占领main身体时，圣杯布局通过外部容器padding来实现left和right与main分离，而双飞翼布局则直接在main内定义一个div，通过该div的padding为left和right让出空间。

看图得区别：

圣杯布局：

双飞翼布局：