zoukankan      html  css  js  c++  java
  • 实现一个两列布局(左侧定宽,右侧自适应)

    html代码:

    <div class="left">固定宽度区</div>
    <div class="right">自适应宽度区</div>
    <div class="footer">底部区</div>

    css代码:

    /*第一种方法(浮动)*/
     .left {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    
    .right {
      margin-left: 100px;
      height: 200px;
      background: green;
    }
    
    .footer {
      clear: both;
      background-color: yellow;
    } 
    
    
    
    /*第二种方法(相对布局)*/
    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 150px;
      background-color: blue;
    }
    
    .right {
      margin-left: 100px;
      height: 150px;
      background-color: green;
    }
    
    .footer {
      background-color: yellow;
    }
    
    
    /*第三种方法(flex)*/
    .left {
      float: left;
      width: 100px;
      height: 150px;
      background-color: blue;
    }
    
    .right {
      display: flex;
      flex: 1;
      height: 150px;
      background-color: green;
    }
    
    .footer {
      background-color: yellow;
    }
  • 相关阅读:
    第二十一章 PHP编译安装(centos7)
    第二十章 nginx常见问题
    第十九章 keepalived高可用
    dijkstra
    求逆序对
    A
    P2014 [CTSC1997]选课
    樱花 混合背包
    1401D
    CF1343D
  • 原文地址:https://www.cnblogs.com/jimmiehwang/p/5391314.html
Copyright © 2011-2022 走看看