HTML代码：
<div class="container"> <div class="main"> <div> 这是中间的内容 </div> </div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div></div>
第一种（定位法）（main显示有bug）：
body,html{margin: 0; padding: 0;}.container{width: 100%; height: 300px; position: relative;}.main{width: 100%; height: 100%; background: #333; margin-left: 200px; margin-right: 200px;}.left{width: 200px; height: 100%; background: red; position: absolute; top: 0; left: 0;}.right{width: 200px; height: 100%; background: yellow; position: absolute; top: 0; right: 0;
第二种（浮动法）：
body,html{margin: 0; padding: 0;}.container{height: 300px;}.main,.left,.right{float: left;}.main{width: 100%; height: 100%; background: yellow;}.main>div{margin: 0 150px 0 200px;}.left{width: 200px; height: 100%; background: red; margin-left: -100%;}.right{width: 150px; height: 100%; background: #333; margin-left: -150px;}第三种（flex布局法）：
参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
body,html{margin: 0; padding: 0;}.container{width: 100%; height: 300px;display: -webkit-flex;display: flex;flex-direction: row;}.main{width: 100%; height: 100%; background: #903;}.left{width: 200px; height: 100%; background: red;order: -1;}.right{width: 200px; height: 100%; background: yellow;}
CSS实现双飞翼布局的几种方法
原文地址：http://www.cnblogs.com/paul0705/p/7792664.html