一、双飞翼布局
经典三列布局，也叫做圣杯布局【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>
结果：
原文地址：https://www.cnblogs.com/yangWanSheng/p/10513155.html
时间： 2024-11-11 17:28:13