css三欄佈局：左右固定寬中間自適應

聖盃佈局

直接上代碼：
html:

<div class="container>
   <div class="middle"></div> 
   <div class="left"></div>
   <div class="right"></div>
</div>

css:

.middle,.left,.right {float: left; position: relative;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; left: -220px;}
.right {margin-left: -220px; width: 220px;right: -220px;}
.container {padding: 0 220px 0 220px}

雙飛翼佈局

html:

<div class="middle">
     <div class="middle-inner></div>
   </div> 
   <div class="left"></div>
   <div class="right"></div>

css:

.middle,.left,.right {float: left;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; }
.right {margin-left: -220px; width: 220px;}
.middle-inner {margin-left: 220px;margin-right: 220px;}

自身浮動法

html:

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

css:

.left,.right,.middle {min-height: 200px}
.left {width: 220px; float: left;  border:1px solid red; } 
.right {width: 160px; float: right;  border:1px solid blue; } 
.middle {margin-left: 250px; margin-right: 180px;  border:1px solid green; }

絕對定位法

html:

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

css:

.left,.right{position: absolute;top: 0;width: 220px;min-height: 130px}
.left {left: 0;}
.right {right: 0;}
.middle {margin:0 220px 0 220px; min-height: 130px}