一、双飞翼布局
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；
在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，实现的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; } #container { width: 90%; margin: 0 auto; height: 100%; } #header, #footer { height: 12.5%; background: deepskyblue; } #main { height: 75%; } #center, #left, #right { height: 100%; float: left; } #center { width: 100%; background: lightgreen; } #right { background: lightblue; width: 20%; margin-left: -20%; } #left { background: lightcoral; width: 20%; margin-left: -100%; } #main-inner { padding-left: 20%; } </style> </head> <body> <div id="container"> <div id="header"> header </div> <div id="main"> <div id="center"> <div id="main-inner"> center </div> </div> <div id="left"> left </div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </div> </body> </html>
结果：
