本文主要是介绍CSS布局 — 圣杯布局 与 双飞翼布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、圣杯布局
圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 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
这篇关于CSS布局 — 圣杯布局 与 双飞翼布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
