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

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

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

看代码：

html：

 <div class="top">this is top</div>
 <div class="container">
     <div class="left">this is left</div>
     <div class="center">this is center</div>
     <div class="right">this is right</div>
 </div>
 <div class="footer">this is footer</div>

然后是CSS：

 .top{
     width: 100%;
     height: 40px;
     background-color: #cccccc;
 }
 .footer{
     width: 100%;
     height: 50px;
     background-color: #abdc44;
 }
 /*左右固定，中间自适应*/
 /*Start*/
 .container{
     width: 100%;
     height: 100%;
     position: relative;
 }
 .left{
     position: absolute;
     left:;
     top:;
     width: 400px;
     height: 800px;
     background-color: black;
 }
 .center{
     width: auto;    /*如果没有这一句，那么，center这个div的文字就不会自动换行*/
     margin: 0 400px;
     height: 1000px;
     background-color: yellow;
 }
 .right{
     position: absolute;
     top:;
     right:;
     width: 400px;
     height: 900px;
     background-color: red;
 }
 /*End*/    

最后是这个样子：