css双飞翼布局与圣杯布局

简介

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

不同之处

所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。 他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。

相同之处

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 只需要使用一个额外的 div 标签

区别：

1. 圣杯布局：

• 布局结构清晰，一目了然
• 为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

2. 双飞翼布局：

• 布局结构不太直观
• 为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局：

用 float 实现圣杯布局

其中：

左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置

中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置

 

中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置

优点：不需要添加dom节点

效果图 

 双飞翼布局

优点：不会像圣杯布局那样变形; 缺点是：多加了一层dom节点

效果图