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>