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

WBOY
Freigeben: 2016-06-24 11:40:22
Original
1229 Leute haben es durchsucht

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

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

看代码:

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>
Nach dem Login kopieren

然后是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*/    
Nach dem Login kopieren

最后是这个样子:

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage