圣杯布局 VS 双飞翼布局

圣杯布局 VS 双飞翼布局

作为前端开发者，布局都应该已经写了不少了，但很多时候我们实现布局的思路可能都不一定正确或者不是最合适的。要想自己的布局水平有所提高，两个经典的布局： 圣杯布局 和 双飞翼布局，我个人觉得还是很有必要掌握的。

圣杯布局和双飞翼布局都是为了实现一种非常常见的布局：即两侧定宽，中间自适应的三列布局，特征是中间列要放在文档流前面以优先渲染。

既然都是为了解决同一个问题，那么有哪些不同呢？我们先来稍微回顾一下这两种布局，再加以比较。

圣杯布局

圣杯布局的来历是2006年发在a list part上的这篇文章：

点击原文链接

html 部分：

<div id="container">
    <div id="main" class="col"> #main </div>
    <div id="left" class="col"> #left </div>
    <div id="right" class="col"> #right </div>
</div>

css 部分：

#container {
    padding-left: 200px;
    padding-right: 250px;
}
.col