纯CSS实现三列布局(两边固定，中间自适应)

看了一些网上的案例，感觉较繁杂，于是，自己整理了一篇来说明这个东西。

也是给我自己复习吧，以前有人问道，我还没答上来呢。＝＝

看代码：

html：

1 <div class="top">this is top</div>
2 <div class="container">
3     <div class="left">this is left</div>
4     <div class="center">this is center</div>
5     <div class="right">this is right</div>
6 </div>
7 <div class="footer">this is footer</div>

然后是CSS：

 1 .top{
 2     width: 100%;
 3     height: 40px;
 4     background-color: #cccccc;
 5 }
 6 .footer{
 7     width: 100%;
 8     height: 50px;
 9     background-color: #abdc44;
10 }
11 /*左右固定，中间自适应*/
12 /*Start*/
13 .container{
14     width: 100%;
15     height: 100%;
16     position: relative;
17 }
18 .left{
19     position: absolute;
20     left: 0;
21     top: 0;
22     width: 400px;
23     height: 800px;
24     background-color: black;
25 }
26 .center{
27     width: auto;    /*如果没有这一句，那么，center这个div的文字就不会自动换行*/
28     margin: 0 400px;
29     height: 1000px;
30     background-color: yellow;
31 }
32 .right{
33     position: absolute;
34     top: 0;
35     right: 0;
36     width: 400px;
37     height: 900px;
38     background-color: red;
39 }
40 /*End*/

最后是这个样子：