当前位置:Gxlcms > html代码 > 纯CSS实现三列布局(两边固定,中间自适应)_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:19人阅读

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

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

看代码:

html:

1 
this is top
2
3
this is left
4
this is center
5
this is right
6
7

然后是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*/    

最后是这个样子:

人气教程排行