开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

正文

背景

前端经常会有多列布局，作为实际项目中比较常见的场景，面试的时候也经常会问到。当内容有背景色或者设置了边框，同一行因为内容不一致就会出现参差不齐的情况，这种情况在视觉体验上是极差的。

但是有些情况我们需要每个列能与最高的那个列等齐。如下图：

多列等高，要求同一排的各列高度自适应且一样(高度以最高的为准)。

背景色/边框等高

实现

其实实现思路很简单，障眼法，加一层容器，多层嵌套.

父级公共代码

<div id="wrapper">
  <div class="left">
  </div>
  <div class="center">
  </div>
  
</div>

display：flex实现多列等高（最常用也比较好实现）

注意：这里会有一个flex布局中设置子元素宽度失效的情况，放在下篇文章

.wrap {
  display: flex;

  .left {
    display: flex;
    flex: 1;
  }
}

2，padding + margin + overflow 实现多列等高效果

父级设置超出隐藏, 将 padding-bottom 设置的非常大，然后将 margin-bottom 设置成相反值。较矮的列会进行高度补偿。

.wrap {
  margin-top: 20px;
  overflow: hidden;

  .left {
    width: 200px;
    float: left;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
  }
}

display：grid实现多列等高

.wrap {
  display: grid;
  grid-template-columns: 200px auto;
  
  .left {
      background: #4caf50;
  }
  
  .right {
      background: #99afe0;
  } 
}

display:table-cell 实现多列等高(天然等高)

.left {
  display: table-cell;
  width: 30%;
}

结语

其实百度的方法有很多，这里只做了几个最常用的方法总结，也是比较推荐在项目中使用的。比较麻烦的可以自己做尝试，当做拓展思路的方法，不推荐在项目里使用。