前端页面的三栏布局为常见的展现结构，中间栏(main)的宽度不确定，左右两栏的宽度固定。本文总结回顾经典的圣杯布局和淘宝双飞翼布局。
| left | main | right |
|---|---|---|
| 固定宽度 | 跟随窗口的宽度 | 固定宽度 |
圣杯布局：
<!-- 样式代码 -->
<style>
* {
margin: 0;
padding: 0;
}
.container {
padding: 0 200px 0 220px;
}
.main, .left, .right {
float: left;
position: relative;
min-height: 130px;
}
.main {
background: yellow;
width: 100%;
}
.left {
background: red;
width: 220px;
margin-left: -100%;
left: -220px;
}
.right {
background: green;
width: 200px;
margin-left: -200px;
right: -200px;
}
</style>
<!-- div结构 -->
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼布局：
<!-- 样式代码 -->
<style>
* {
margin: 0;
padding: 0;
}
.left,
.main,
.right {
position: relative;
float: left;
min-height: 130px;
}
.left {
margin-left: -100%;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
width: 220px;
background: green;
}
.main {
width: 100%;
background: blue;
}
.inner {
margin: 0 200px 0 220px;
}
</style>
<!-- div结构 -->
<div class="container">
<div class="main">
<div class="inner">
inner
</div>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
