左中右三栏布局

    <div class="box">
      <div class="same left">
        1
      </div>
      <div class="center">
        2
      </div>
      <div class="same right">
        3
      </div>
    </div>

• float（需要清除浮动，不定高的话，中间区域高度增加，左右不会变化）

.box {
  div {
    height: 500px;
  }
  .same {
    width: 300px;
  }
  .left {
    background: red;
    float: left;
  }
  .right {
    background: blue;
    float: right;
  }
  .center {
    background: pink;
  }
}

• absolute（中间区域高度增加，左右不会变化）

.box {
  div {
    height: 500px;
    position: absolute;
  }
  .same {
    width: 300px;
  }
  .left {
    background: red;
    left: 0;
  }
  .right {
    background: blue;
    right: 0;
  }
  .center {
    background: pink;
    left: 300px;
    right: 300px;
  }
}

• flex

.box {
  display: flex;
  div {
    height: 500px;
  }
  .same {
    width: 300px;
  }
  .left {
    background: red;
  }
  .right {
    background: blue;
  }
  .center {
    background: pink;
    flex: 1;
  }
}

• table（兼容性好）

.box {
  display: table;
  width: 100%;
  div {
    height: 500px;
    display: table-cell;
  }
  .same {
    width: 300px;
  }
  .left {
    background: red;
  }
  .right {
    background: blue;
  }
  .center {
    background: pink;
  }
}