zoukankan      html  css  js  c++  java
  • 纯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*/    

    最后是这个样子:

  • 相关阅读:
    洛谷 P1284 三角形牧场WD
    luogu P3817 小A的糖果
    P3374 【模板】树状数组 1
    线程与threading模块
    socketserver模块
    python 粘包问题及解决方法
    python 网络编程
    类的进阶四 反射和内置方法
    python hashlib模块 logging模块 subprocess模块
    类的进阶三
  • 原文地址:https://www.cnblogs.com/erichain/p/4677477.html
Copyright © 2011-2022 走看看