您所在的位置:小祥子 » 编程 » CSS » 正文

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

时间:2015-07-26 编辑:Erichain 来源:CnBlogs

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

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

看代码:

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*/    

最后是这个样子:

关键词:CSS