多列等高布局

HTML 结构：

<div class="box">
  <div class="item item1">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
  </div>
  <div class="item item2">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
  </div>
  <div class="item item3">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
  </div>
</div>

样式：

.item {
  width: 33.33%;
}
.item {
  background-color: red;
}
.item2 {
  background-color: blue;
}
.item3 {
  background-color: yellow;
}

Flex

原理：align-items: stretch flex元素会默认被拉伸到最高元素的高度

.box {
  display: flex;
}

负margin + padding

原理：利用负margin抵消padding带来的距离
缺点：会遮盖绝对定位元素

.box {
  /* display: flex; */
  overflow: hidden;
}    
.item {
  float: left;
  width: 33.33%;
  margin-bottom: -999px;
  padding-bottom: 999px;
}

Grid

原理：宽度和高度会默认填满整个项目

.box {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
}
.item {
  /* width: 33.33%; */
}