1、两边宽度固定，中间宽度自适应
（1）非CSS3布局，浮动定位都可以（以下用浮动）
css样式：
#left { float: left;width: 200px; background: lime;}
#right { float: right; width: 200px; background: lime;}
#center { margin:0 200px; background: blue}
html：
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
（2）CSS3布局
css样式：
* { padding:; margin:;}
body { display: -webkit-box;}
div { padding: 50px;}
div[left] { width: 200px; background: lime}
div[right] { width: 200px; background: lime;}
div[center] { -webkit-box-flex:; background: yellow}
html：
<div left>left</div>
<div center>center</div>
<div right>right</div>
2、中间宽度固定，两边宽度自适应
（1）非CSS3布局，浮动与margin解决
css：
.center {width: 600px; background: yellow;}
.center,.left,.right { float: left; }
.left,.right { width: 50%; margin-left: -300px; }
.inner { padding: 50px;}
.left .inner,.right .inner { margin-left: 300px; background: red;}
html：
<div class="left">
<div class="inner">left</div>
</div>
<div class="center">
<div class="inner">center</div>
</div>
<div class="right">
<div class="inner">right</div>
</div>
（2）非CSS3布局,定位与margin解决
css:
* { padding:; margin:;}
#center { width: 600px; background: red; margin: 0 auto;}
#left { position: absolute; top:; left:;width: 50%;}
#right { position: absolute; top:; right:; width: 50%;}
#left div { margin-left: 300px; position: relative; left: -300px; background: lime;}
#right div { margin-right: 300px; position: relative; left: 300px; background: lime;}
html:
<div id="left">
<div>left</div>
</div>
<div id="right">
<div>right</div>
</div>
<div id="center">center</div>
(3)CSS3布局
css3:
div[you=me] { display: -webkit-box;}
div div { background: red; height: 100px;}
div div:nth-child(1) {-webkit-box-flex:;}
div div:nth-child(2) { width: 600px; background: lime}
div div:nth-child(3) {-webkit-box-flex:;}
html:
<div you="me">
<div>left</div>
<div>center</div>
<div>right</div>
</div>