CSS布局之圣杯布局和双飞翼布局

其实圣杯布局和双飞翼布局实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果都是一样的，差别在于其实现的思想。

一、圣杯布局

html代码中，将重要的内容middle放在container的最前面，然后是left、right
1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行
3、将left放在middle所在行的最左边，给left设置

margin-left:-100%;

4、left覆盖了middle内容的最左端，此时给container设置

padding:0 100px;

5、将left填充container最左边的空白部分，为left设置

position:relative;
left:-100px;

6、同理先给right设置

margin-left:-100px;

7、然后给right添加

position:relative;
right:-100px;

实现圣杯布局的代码如下：

二、双飞翼布局

双飞翼布局与圣杯布局不同的是，在中间重要的内容块里面再嵌套了一个div用于放内容，然后设置该div的margin，来达到三栏式的效果。

1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行
3、将left放在middle所在行的最左边，给left设置

margin-left:-100%;

4、将right放到middle所在行的最右变，给right设置

margin-left:-100px;

5、middle的一部分给left和right覆盖了，给middle中添加

6、然后设置wrap

margin:0 110px;

双飞翼的代码如下：

三、两个布局的异同

• 1.两种布局方式都是把主列放在文档流最前面，使主列优先加载；
• 2.两者在实现上的相同点在于都让三列浮动，然后通过负外边距形成三列布局；
• 3.两种布局方式的不同在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。