本文主要是介绍三列布局--双飞翼布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
双飞翼布局:
两边的盒子宽度固定，中间盒子自适应（三列布局）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>双飞翼布局</title><style>*{padding: 0;margin: 0;}html,body{width:100%;height:100%;}#wrap{width: 100%;height: auto;min-height: 100%;}#header{width: 100%;height: 30px;background: grey;}.container{width: 100%;padding-bottom: 30px;}/*父元素添加伪元素样式清除浮动，处理float的子元素无法撑开父元素高度问题*/.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.middle{width: 100%;height: auto;float:left;box-sizing: border-box;padding: 0 200px;background-color: deeppink;}.left{width: 200px;height: 200px;float:left;margin-left:-100%;background-color: blue;}.right{width: 200px;height: 200px;float:left;margin-left:-200px;background-color: darkorchid;}#footer{position: relative;width: 100%;height: 30px;margin-top: -30px;background: grey;}</style></head><body><div id="wrap"><div id="header">头部信息</div><div class="container clearfixr"><div class="middle"><h4>中间弹性区</h4></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div></div><div id="footer">底部信息</div></body>
</html>这篇关于三列布局--双飞翼布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
