完美三栏网页布局例子

最近在内部讨论关于“完美三栏”的话题,看到一篇“In Search of the Holy Grail”,相当的好.故此翻译之.

In Search of the Holy Grail

很抱歉我没有将这篇文章命名.我不是想夸大他的重要性或是轻视其他的 Holy Grails.但是确实是这么称呼，我们都明白它的含义.

三栏，一个是固定宽度的导航栏,另一个是GOOGLE广告，或是Filckr图片展示，就像Fancy的松露巧克力一样，和一个重要的柔滑的夹心。在这个博客流行的黄金年代它是相当适用的，加之相当大的实现难度，理所应当的获取了”圣杯”的名称.

有很多文章是讨论关于”圣杯”的，也有很多很好的模板可以使用。但是，所有的方案都是以牺牲以下特性为代价的：合理的内容顺序，宽度自适应，合理的标签。这三者往往是这难以达到合理的布局中要折中的元素

在最近的一个项目中我终于找到了传说中的圣杯。我在不会改变您的代码和灵活性的前提下尽可能的描述他。他会是：

• 一个自适应适应的中心和固定宽度的侧边栏
• 允许中间的内容先于其他出现在代码中
• 允许任何一栏都是最高的高度
• 只需要额外的一个DIV标签
• 非常的简单的CSS代码和很少很少的HACK 补丁

站在巨人的肩膀上

这个技术的灵感来自于Alex Robinson’s的 One True Layout 。他曾经在他的文章里阐述过”圣杯”的若干问题，但是他的解决方法需要两个包装并且要求每一栏都需要一个父级DIV，否则很难写内在结构.
另一方面则是由 Eric Meyer’s的写法 想到的，他利用了多种类型的单元混合定位。它的例子中也是用了固定的侧边栏和自适应的中心层，可是不幸的是，他依赖于近似的百分比，不是固定的值，而且填充了一部分随屏幕分辨率不同而自适应宽度的层。