双飞翼布局的好处和写法

双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。

三列布局的实现方式就是让三列外面套一个<div id="container">，如下代码：

< 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，

.column{     float :  left ; }

接着，让中间列div宽度占满整个宽度100%（宽度设成百分数是相对于父元素的宽度，所以container的100%是浏览器宽度，center_div宽度就是container全宽度，也等于浏览器宽度）：

#container{      width :  100% ; } #center_div{       width :  100% ; }

浮动的特点就是这一行占满了就既不进来别的元素了，只要宽度能挤下，就会挤进来。中间列div不是占了全部了吗，挤不下怎么办，办法是让左右两个div覆盖在上面，这样就挤下了，这就是负外边距的作用。

所以，

再接着，把左边div设置负边距margin-left:-100%和固定width（假设是300px），负边距的作用就是让左边div盖在中间div上面，设成100%就会盖在中间div最左边。（这个100%是指的外面div，也就是那个id="container"的宽度）

#left_div{      width :  300px ;      margin-left :  100% ; }

右边div设置固定width，假设是200px，负边距margin-left:200px和这它的固定宽度一致，这样会盖在最中间div右边。

#right_div{      width :  200px ;      margin-left :  200px ; }

-----------------------------------分割线--------------------------------

到这一步为止，如果你给每个div加上颜色，会看到它们已经形成了三列，但是问题在于，中间div的内容被挡住了，

所以最后一步，就是在中间div里再创建一个子div，让这个子div的左右外边距分别等于左边div和右边div的固定宽度，

如下：

< 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按照上面的取值就是这么写：

#center_div  #mainWrap{      margin-left :  300px ;      margin-right :  200px ; }

 

OK，这样就完工了。你在各个div里放入一些文字，缩放一下浏览器窗口看看，左右宽度是不变的，中间的内容会随着内容的多少让网页高度变化。