双飞翼布局和圣杯布局

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

1、 双飞翼布局

html代码段

 

css布局代码段

双飞翼布局，使用了浮动。#left元素的margin-left:-100%,指#main元素的宽度。这里的宽度是content-width;

#right 元素的margin-left:-190px,为右栏元素的宽度。

运行结果如下：

2 圣杯布局

html代码段

注意！没有main-wrap元素

css布局代码段

圣杯布局，使用了浮动和定位。#left元素的margin-left:-100%,指#main元素的宽度，这里的宽度是content-width;。再使用relative属性相对自己的原始位置定位，left:-190px.为左栏的宽度。#right 元素的margin-right:-190px,为右栏元素的宽度。

(经测试，#right 元素也可以设置位置为margin-left:-190px,right:-190px;)

运行结果如下：

总结：

(1)写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染并且设置其自适应，也就是width:100%。

(2)相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含。