星空网 > 软件开发 > 网页设计

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

最后是这个样子:

 

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




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

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流