双飞翼布局----利用float和margin实现双飞翼布局

双飞翼布局----利用float和margin实现双飞翼布局

双飞翼布局实现两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。 这里对布局进行改进，会将中间栏放到两边定宽后渲染！

HTML代码

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居中就好！

其他

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。