双飞翼布局实现两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。
这里对布局进行改进,会将中间栏放到两边定宽后渲染!
HTML代码
<div id="main-content">
<div id="main-left">left容器</div>
<div id="main-right">right容器</div>
<div id="main-center">center容器</div>
</div>
CSS代码
#main-left,#main-right,#main-center{
height: 200px;
color: #fff;
box-sizing: border-box;
padding: 10px;
}
#main-left{
float: left;
background: blue;
width: 100px;
}
#main-right{
float: right;
background: green;
width: 100px;
}
#main-center{
margin: 0 100px;
background: pink;
}
改进原理,就是根据浮动(float)会脱离文档流,先将左右两边的固定进行左右浮动,然后将center进行margin-left和margin-right居中就好!