1 圣杯布局
body {min-width: 390px;}
.header {height: 60px;background-color: blueviolet;}
.container {padding: 0 150px 0 120px;}
.container::after {content: '';display: block;clear: both;}
.container>div {float: left;}
.center {height: 50px;background-color: yellow;width: 100%;}
.left { height: 50px;background-color: red;width: 120px;margin-left:-100%;position:relative;left: -120px;}
.right {height: 50px;background-color: pink;width: 150px;margin-right: -150px; }
.footer {height: 30px; background-color: #ccc;}
<body>
<div class="header">我是header</div>
<div class="container">
<div class="center">我是center</div>
<div class="left">我是left</div>
<div class="right">我是right</div>
</div>
<div class="footer">我是footer</div>
</body>
2 双飞翼布局
.header, .footer { height: 20px;background: #ddd; }
.footer { clear: both; }
.container { width: 100%;}
.center { background-color: yellow; height: 50px;margin: 0 150px 0 120px;}
.left {height: 50px;background-color: red; width: 120px;margin-left: -100%;}
.right { height: 50px; background-color: pink;width: 150px; margin-left: -150px;}
.column { float: left;}
body { min-width: 400px }
<body>
<div class="header">我是header</div>
<div class="container column">
<div class="center">
我是center
</div>
</div>
<div class="left column">
left
</div>
<div class="right column">
我是right
</div>
<div class="footer">我是footer</div>
</body>
3 总结
- 使用float布局
- 两侧使用margin复制，以便和中间内容横向重叠
- 防止中间内容被覆盖，圣杯布局用padding，双飞翼布局margin
