两栏布局

---

一、前言

左侧宽度固定，右侧宽度自适应

      <div class="box">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>

      .box {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
      }
      .left {
        width: 100px;
        height: 50px;
        background: lightpink;
      }
      .right {
        min-height: 100px;
        /* 在下面布局中这行代码（设置背景颜色 ）需要删除 */
        background: lightblue;
      }

图示：

---

二、两栏布局的方法

1.绝对定位布局

      .box{
        position: relative;
      }
      .box div{
        position: absolute;
      }
      .left{
        left: 0;
      }
      .right{
        left: 100px;
        right: 0;
        background: lightblue;
      }

2.浮动+margin

      .left{
        float: left;
      }
      .right{
        margin-left: 100px;
        background: lightblue;
      }

3.浮动+calc（）

      .box div {
        float: left;
      }
      .right {
        width: calc(100% - 100px);
        background: lightblue;
      }

4.浮动+相对定位

      <div class="box">
        <div class="right">right</div>
        <div class="left">left</div>
      </div>

      .box{
        padding-left: 100px;
      }
      .box div{
        float: left;
        position: relative;
      }
      .left{
        margin-left: -100%;
        left: -100px;
      }
      .right{
        width: 100%;
        background: lightblue;
      }

5.flex布局

      .box{
        display: flex;
      }
      .left{
        order: 1;
      }
      .right{
        order: 2;
        flex: 1;
        background: lightblue;
      }

6.grid布局

      .box{
        display: grid;
        grid-template-columns: 100px auto;
      }
      .right{
        background: lightblue;
      }

三、图示