看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西。
也是给我自己复习吧,以前有人问道,我还没答上来呢。==
看代码:
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*/
最后是这个样子:
时间: 2024-11-05 11:40:14