CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

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>