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

<div class="container">
　　<div class="main">
　　　　<div>
　　　　　　这是中间的内容
　　　　</div>
　　</div>
　　<div class="left">左侧边栏</div>
　　<div class="right">右侧边栏</div>
</div>

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

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