前言
「圣杯布局」—— 虽然这是一个很古老的话题了，而且网上早就有许多相关的文章，但作为前台入门和面试的必备知识之一，还是觉得有必要温故而知新一番。理解一下它的原理甚至是历史，而不应盲目引使用和浮于表面。
圣杯的由来
圣杯布局是探讨「三栏液态布局」的实现，它最早出自于谁或者许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。
所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它能随着容器宽度的变化而自适应宽度。
在这篇文章中，作者指出了当时的少量实现方式所存在的问题，如：必需按照源顺序（在 DOM 中体现为先写 Left，而后 Middle，最后，Right）等，它将可可以导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不可以被首先加载。
因而他给出一个方案，它将：
- 两边带有固定宽度中间能流动（fluid）；
- 允许中间一栏最先出现；
- 允许任意一栏放在最上面；
- 仅需一个额外的 div 标签
- 仅需非常简单的 CSS，带上最少的兼容性补丁
文中还提到了他的这个想法是基于「One True Layout」 和 「 Eric Meyer’s adaptation」两篇文章带来的灵感。
实现方式
接下来就言归正传，说下具体的实现思路：
首先我们需要布局的 HTML 代码如下，作者在这里为了便于表达，对标签用了非语义化的 id，他建议在其余任何正式项目中尽量用语义化的 id。例如，我们需要实现的是左侧宽度为 200px，右侧宽度为 150px，中间是流动的布局。
