CSS布局 — 圣杯布局与双飞翼布局

来源：互联网发布：声优必备软件编辑：程序博客网时间：2024/04/30 22:30

一、圣杯布局

  圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 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>

圣杯布局的来历是2006年发在a list part上的这篇文章：http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED：http://www.imooc.com/wenda/detail/254035
还有这里的一篇两者的比较：http://www.cnblogs.com/imwtr/p/4441741.html

0 0

CSS布局 — 圣杯布局 与 双飞翼布局

CSS布局 — 圣杯布局与双飞翼布局