两栏布局三种方式实现

1. 实际上类似 三栏布局，仍然是三种实现方式：浮动、定位、flex

【1】float + margin-left / BFC（overflow: hidden;）

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

    .box {
      width: 100%;
    }
    .left {
      width: 100px;
      height: 100px;
      float: left;
      background-color: skyblue;
    }
    .right {
      /*margin-left: 100px;*/
      background-color: pink;
      overflow: hidden;
      height: 100px;
    }

2. position + margin-left

    .box {
      position: relative;
    }
    .left {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: skyblue;
    }
    .right {
      margin-left: 100px;
      height: 100px;
      background-color: rosybrown;
    }

3. flex

    .box {
      width: 100%;
      display: flex;
    }
    .left {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .right {
      flex: 1;
      height: 100px;
      background-color: palegreen;
    }

 

标签：两栏,color,布局,100px,height,width,三种,background,left
来源： https://www.cnblogs.com/twinkleG/p/15364956.html