圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。
效果图
原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。注意：为了安全起见，最好还是给body加一个最小宽度!
双飞翼布局要求
|
双飞翼布局的实现
- left、center、right三种都设置左浮动
- 设置center宽度为100%
- 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
- 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>body {min-width: 550px;font-weight: bold;font-size: 20px;}#header,#footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;}#container {overflow: hidden;}.column {text-align: center;height: 300px;line-height: 300px;}#left, #right, #center {float: left;}#center {width: 100%;background: rgb(206, 201, 201);}#left {width: 200px;margin-left: -100%;background: rgba(95, 179, 235, 0.972);}#right {width: 150px;margin-left: -150px;background: rgb(231, 105, 2);}.content {margin: 0 150px 0 200px;}
</style><body><div id="header">#header</div><div id="container"><div id="center" class="column"><div class="content">#center</div></div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div><div id="footer">#footer</div>
</body></html>
