純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: 0;
    top: 0;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center{
    width: auto;    /*如果沒有這一句，那么，center這個div的文字就不會自動換行*/
    margin: 0 400px;
    height: 1000px;
    background-color: yellow;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 900px;
    background-color: red;
}
/*End*/    

最后是這個樣子：