一, 双飞翼布局
经典三列布局, 也叫做圣杯布局 [Holy Grail of Layouts] 是 Kevin Cornell 在 2006 年提出的一个布局模型概念, 在国内最早是由淘宝 UED 的工程师传播开来, 在中国也有叫法是双飞翼布局, 它的布局要求有几点:
1, 三列布局, 中间宽度自适应, 两边定宽;
2, 中间栏要在浏览器中优先展示渲染;
3, 允许任意列的高度最高;
4, 要求只用一个额外的 DIV 标签;
5, 要求用最简单的 CSS, 最少的 HACK 语句;
在不增加额外标签的情况下, 圣杯布局已经非常完美, 圣杯布局使用了相对定位, 以后布局是有局限性的, 而且宽度控制要改的地方也多. 在淘宝 UED http://www.aliued.com/ (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>
结果:
来源: http://www.bubuko.com/infodetail-3377377.html