圣杯布局理解与思考

圣杯布局来源于文章In Search of the Holy Grail，遵循了以下要点：

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 只需要使用一个额外的<div>标签

圣杯布局

1. DOM结构

 

主区域放在前面主要是为了DOM渲染时优先渲染内容区域。

2. CSS代码

 设定左侧跟右侧的固定宽度。

设置三列的宽度跟浮动，同时清除浮动流防止内容塌陷。效果如下：

因为主区域的宽度是100%，所以左区域和右区域会被挤在第二行，我们现在要做的就是将左区域放在预留的位置上。

 

 效果如下:

 最后将右区域也放到预留的位置，布局就快成功了。

 效果完成：

最后为了让布局效果正常显示，我们应该设置一个最小宽度。200+150+200=550px,2个200px分别指左侧的200px与left中position:relative留下的200px。

 

 这样就完成了圣杯布局。