标签：
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: 0; margin: 0;} body { display: -webkit-box;} div { padding: 50px;} div[left] { width: 200px; background: lime} div[right] { width: 200px; background: lime;} div[center] { -webkit-box-flex:1; 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: 0; margin: 0;} #center { width: 600px; background: red; margin: 0 auto;} #left { position: absolute; top: 0; left: 0;width: 50%;} #right { position: absolute; top: 0; right: 0; 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:1;} div div:nth-child(2) { width: 600px; background: lime} div div:nth-child(3) {-webkit-box-flex:1;}
html:
<div you="me">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
标签：
原文地址：http://www.cnblogs.com/zhanyishu/p/5656875.html
