<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container {
overflow: hidden;
}
.center {
width: 100%;
height: 100px;
float: left;
background-color: red;
}
.center>div{
margin: 0 200px;
}
.left {
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 100px;
background-color: blue;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<!-- 优先渲染 -->
<div class="center"><div>center</div></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。