css佈局之聖杯篇

 1 <div class="header">頭部</div>
 2     <div class="container">
 3         <div class="center">
 4             適應中間
 5         </div>
 6         <div class="left">
 7             固定左
 8         </div>
 9         <div class="right">
10             固定右
11         </div>
12     </div>
13 <div class="footer">腳部</div>

 1 .header {
 2     width: 100%;
 3     background: red;
 4     height: 50px;
 5 }
 6 .container {
 7     clear: both;
 8     overflow: hidden;
 9     padding: 0 130px 0 100px;
10 }
11 .container .left {
12     width: 100px;
13     float: left;
14     background: orange;
15     height: 100px;
16     margin-left: -100%;
17     position: relative;
18     left: -100px;
19 }
20 .container .center {
21     background: green;
22     height: 100px;
23     float: left;
24     width: 100%;
25 }
26 .container .right {
27     width: 130px;
28     float: left;
29     background: blue;
30     height: 100px;
31     margin-left: -130px;
32     position: relative;
33     right: -130px;
34 }
35 .footer {
36     width: 100%;
37     background: red;
38     height: 50px;
39 }

主要思路：center-->left-->right。