[翻译]寻找圣杯
发布: 2008-11-19 10:49 | 作者: 来源：ued.alipay 作� | | 查看: 11次
最近在内部讨论关于”完美三栏”的话题,看到一篇”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的写法想到的，他利用了多种类型的单元混合定位。它的例子中也是用了固定的侧边栏和自适应的中心层，可是不幸的是，他依赖于近似的百分比，不是固定的值，而且填充了一部分随屏幕分辨率不同而自适应宽度的层。
言归正传，看看代码
代码是很直观而且很优雅的。
(为了直观起见，我们使用了非语义化的”中心”、”左”和”右”来阐述我们的代码，但是我们建议您在您的代码中使用语义化的标签 -Ed.)
