双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。
三列布局的实现方式就是让三列外面套一个<div id="container">，如下代码：
1
2
3
4
5
<div id="container">
<div id="center_div" class="column">主要内容</div>
<div id="left_div" class="column"></div>
<div id="right_div" class="column"></div>
</div>
浏览器是按照你写html的顺序渲染的，所以把中间div要写到前面，这就满足了问题里的第二个。但是正常是，写到前面也会显示到前面，咋办，别急，接着看：
然后让这三列div都浮动起来, float:left，
1
2
3
.column{
float: left;
}
接着，让中间列div宽度占满整个宽度100%（宽度设成百分数是相对于父元素的宽度，所以container的100%是浏览器宽度，center_div宽度就是container全宽度，也等于浏览器宽度）：
1
2
3
4
5
6
#container{
width: 100%;
}
#center_div{
width: 100%;
}
浮动的特点就是这一行占满了就既不进来别的元素了，只要宽度能挤下，就会挤进来。中间列div不是占了全部了吗，挤不下怎么办，办法是让左右两个div覆盖在上面，这样就挤下了，这就是负外边距的作用。
所以，
再接着，把左边div设置负边距margin-left:-100%和固定width（假设是300px），负边距的作用就是让左边div盖在中间div上面，设成100%就会盖在中间div最左边。（这个100%是指的外面div，也就是那个id="container"的宽度）
1
2
3
4
#left_div{
width: 300px;
margin-left: 100%;
}
右边div设置固定width，假设是200px，负边距margin-left:200px和这它的固定宽度一致，这样会盖在最中间div右边。
1
2
3
4
#right_div{
width: 200px;
margin-left: 200px;
}
-----------------------------------分割线--------------------------------
到这一步为止，如果你给每个div加上颜色，会看到它们已经形成了三列，但是问题在于，中间div的内容被挡住了，
所以最后一步，就是在中间div里再创建一个子div，让这个子div的左右外边距分别等于左边div和右边div的固定宽度，
如下：
1
2
3
4
5
6
<div id="container">
<div id="center_div" class="column">
<div id="mainWrap">主要内容</div>
<div id="left_div" class="column"></div>
<div id="right_div" class="column"></div>
</div>
假设这个子div的id=mainWrap，那么CSS按照上面的取值就是这么写：
1
2
3
4
#center_div #mainWrap{
margin-left: 300px;
margin-right: 200px;
}
OK，这样就完工了。你在各个div里放入一些文字，缩放一下浏览器窗口看看，左右宽度是不变的，中间的内容会随着内容的多少让网页高度变化。
