SOURCE

通过flex实现
<div class="parent2">
  <div class="left2" style="background-color: lightblue;">
    <p>
      left
    </p>
    <p>
      left
    </p>
  </div>
  <div class="center2" style="background-color: pink;">
    <p>
      center
    </p>
    <p>
      center
    </p>
  </div>
  <div class="right2" style="background-color: lightgreen;">
    <p>
      right
    </p>
    <p>
      right
    </p>
    <p>
      right
    </p>
    <p>
      right
    </p>
  </div>
</div>
通过grid实现
<div class="parent3">
  <div class="left" style="background-color: lightblue;">
    <p>
      left
    </p>
  </div>
  <div class="center" style="background-color: pink;">
    <p>
      center
    </p>
    <p>
      center
    </p>
  </div>
  <div class="right" style="background-color: lightgreen;">
    <p>
      right
    </p>
  </div>
</div>
通过表格实现
<div class="parent1" style="background-color: lightgrey;">
  <div class="left1" style="background-color: lightblue;">
    <p>
      left
    </p>
    <p>
      left
    </p>
  </div>
  <div class="centerWrap">
    <div class="center1" style="background-color: pink;">
      <p>
        center
      </p>
      <p>
        center
      </p>
    </div>
  </div>
  <div class="right1" style="background-color: lightgreen;">
    <p>
      right
    </p>
    <p>
      right
    </p>
    <p>
      right
    </p>
    <p>
      right
    </p>
  </div>
</div>

body,
p {
  margin: 0;
}


/* 通过flex实现等高 */

.parent2 {
  display: flex;
}

.left2,
.center2,
.right2 {
  flex: 1;
  margin-right: 20px;
}


/* 通过grid实现等高 */

.parent3 {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
}


/* 通过table实现等高 */

.parent1 {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.left1,
.centerWrap,
.right1 {
  display: table-cell;
  vertical-align: middle;
  border-spacing: 15px;
}