如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局

勇气也许不能所向披靡，但胆怯根本无济于事。

希望你永远有勇气从头再来。

​

引用——圣杯（Holy Grails）布局&双飞翼布局

        圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 

        《In Search of the Holy Grail》，

        国内最早是淘宝UED的工程师（玉伯）对圣杯布局改进并传播开来，国内叫法是双飞翼布局 。

        双飞翼布局是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。

​

 

        圣杯布局和双飞翼布局达到的效果基本相同，

        均是三栏布局，侧边两栏宽度固定，中间栏宽度自适应。

        主要的不同之处就是在防止中间部分被覆盖时，采取的解决办法不一样，

        圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，

        而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。