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