经典三列布局,也叫做圣杯布局【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同一行边界的空位*/ }
图例步骤如下:

Step 1: Create the frame

Step 2: Add the columns

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

点击这里demo
原创文章,转载请注明: 转载自CSS ARTIST-前端开发生活日志
本文链接地址: 重温经典布局-圣杯Holy Grail of Layout
回复 (0) to 重温经典布局-圣杯Holy Grail of Layout