圣杯布局

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

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

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

  3. 允许任意列的高度最高

  4. 要求只用一个额外的 div 标签

  5. 要求用最少的 CSS,最少的 Hack 语句

    1
    2
    3
    4
    5
    6
    7
    <div class="header"></div>
    <div class="wrap">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .wrap {
    padding: 0 100px 0 120px;
    overflow: hidden;
    zoom: 1;
    }
    .center, .left, .right {
    float: left;
    height: 200px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    }
    .center {
    width: 100%;
    background: #eee;
    }
    .left {
    width: 120px;
    margin-left: -100%;
    background: #ace;
    position: relative;
    left: -120px;
    }
    .right {
    width: 100px;
    margin-left: -100px;
    background: #f50;
    position: relative;
    right: -100px;
    }