CSS布局 — 圣杯布局与双飞翼布局_一个是「圣杯布局」, 另一个是「双飞翼布局」-优快云博客

本文介绍了两种经典的三栏液态布局方案——圣杯布局和双飞翼布局，这两种布局均能实现灵活且优雅的网页排版效果，并分别详细阐述了其实现原理及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、圣杯布局

  圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。

所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，

它可以随着容器宽度的变化而自适应宽度。

  在这篇文章中，作者指出了当时的一些实现方式所存在的问题，如：必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。

因此他给出一个方案，它将：
a.两边带有固定宽度中间可以流动（fluid）；
b.允许中间一栏最先出现；
c.允许任意一栏放在最上面；
d.仅需一个额外的 div 标签
e.仅需非常简单的 CSS，带上最少的兼容性补丁
文中还提到了他的这个想法是基于「One True Layout」和「 Eric Meyer’s adaptation」两篇文章带来的灵感。
在这里你可以看到「圣杯布局」的最终效果：http://alistapart.com/d/holygrail/example_1.html

    <style>
    body {
      min-width: 550px;      /* 2x LC width + RC width */
    }
    #container {
      padding-left: 200px;   /* LC width */
      padding-right: 150px;  /* RC width */
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 200px;          /* LC width */
      right: 200px;          /* LC width */
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;          /* RC width */
      margin-right: -150px;  /* RC width */
    }
    #footer {
      clear: both;
    }
    #header, 
    #footer {
      background-color: #c9c9c9;
    }
    /*** IE6 Fix ***/
    * html #left {
      left: 150px;           /* RC width */
    }
    </style>
    <body>
     <div id="header">#HEADER</div>
      <div id="container">
        <div id="center" class="column">#center</div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
      </div>
     <div id="footer">#FOOTER</div>
    </body>

来源： http://cnodejs.org/topic/56d70d5f4dfa4031185aabbf

二、双飞翼布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>双飞翼布局</title>
    <style>
    *{margin:0; padding:0;text-align:center;}
    body{min-width:550px;}
    #header,#footer{background-color:#666;}
    /*#container{padding-left:200px; padding-right:150px;}*/
    #container .column{float:left;height:150px;}
    #center{width:100%;background-color:#999;}
    #center .wrap{margin:0 150px 0 200px;}
    #left{width:200px;margin-left:-100%; background-color:#69C;}
    #right{ width:150px;margin-left:-150px;background:#6CC;}
    #footer{clear:both;}
    </style>
    </head>
    <body>
    <div id="header">This is header.</div>
    <div id="container">
      <div id="center" class="column"><div class="wrap">This is content-center.</div></div>
      <div id="left" class="column">This is content-left.</div>
      <div id="right" class="column">This is content-right.</div>
    </div>
    <div id="footer">This is footer.</div>
    </body>
    </html>