CSS实现双飞翼布局的几种方法

http://blog.csdn.net/wangchengiii/article/details/77926868

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;
}