Home > 前端开发 > 重温经典布局-圣杯Holy Grail of Layout

重温经典布局-圣杯Holy Grail of Layout

经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

1、三列布局,中间宽度自适应,两边定宽;

2、中间栏要在浏览器中优先展示渲染;

3、允许任意列的高度最高;

4、要求只用一个额外的DIV标签;

5、要求用最简单的CSS、最少的HACK语句;

我们先来看下基础结构代码:

<div class="wrapper">
  <div id="main" class="column"></div>
  <div id="lc" class="column"></div>
  <div id="rc" class="column"></div>
</div>

样式定义代码:

body{padding:0;margin:0;}
.wrapper{
    height:100%;
    zoom:1;
    overflow:hidden;
    background:black;
    padding:0 150px 0 200px;  /*预留空位:左内补丁=LC栏宽度  右内补丁=LR栏宽度*/
}
.wrapper:after{clear:both;content:'\20';height:0;visibility:none;}
.column{float:left;position:relative;}  /*三列浮动并相对定位,便于使用样式将三列拉到同一行中*/

#main{width:100%;min-height:500px;background:gray;}
#lc{width:200px;min-height:500px;background:red;
    margin-left:-100%; /*把LC拉到main的同一行,左上角对齐*/
    right:200px; /*使LC向左相对平移到边界空出来的空位上*/
    _left:150px; /*针对IE6对margin-left:-100%的计算BUG,这里的100%宽度等于浏览器的宽度而不
是width,因此要向右偏移出相应的值,即RC的宽度值*/ } #rc{width:150px;min-height:500px;background:yellow; margin-right:-150px; /*RC 向右拉到和main同一行边界的空位*/ }

图例步骤如下:

Figure 1: the outline of the header, footer, and container

Step 1: Create the frame

Figure 2: the three columns lined up in source order

Step 2: Add the columns

Figure 3: the left column pulled 100% to the left

Step 3: Pull the left column into place—halfway there

Figure 5: the right column pulled 100% to the right
Step 4: Pull the right column into place

点击这里demo

原创文章,转载请注明: 转载自CSS ARTIST-前端开发生活日志

本文链接地址: 重温经典布局-圣杯Holy Grail of Layout

回复 (0) to 重温经典布局-圣杯Holy Grail of Layout

› 尚无评论。

发表评论 修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 :wink:  :-|  :-x  :twisted:  :)  8-O  :(  :roll:  :-P  :oops:  :-o  :mrgreen:  :lol:  :idea:  :-D  :evil:  :cry:  8-)  :arrow:  :-?  :?:  :!: