高度与其他列相同的列[重复]

Question

我有制作列的代码。在本专栏中，我将有文字，但文字的高度不同，有没有办法让 div 中的列与最高列的高度相同？

.col-3 {
  width: 30%;
  margin: auto;
  text-align: center;
  display: inline-block;
  height: inherit;
}
col .fa {
  display: block;
  color: $black;
  margin-bottom: 5%;
}

<div class="container">
  <div class="col-3"><i class="fa fa-tint fa-5x" aria-hidden="true">pic</i><br>Hello user!</div>
  <div class="col-3"><i class="fa fa-home fa-5x" aria-hidden="true">pic</i><br></div>
  <div class="col-3"><i class="fa fa-map-marker fa-5x" aria-hidden="true">pic</i><br>Test</div>
</div>  

而且我不想使用任何引导程序。

附言。我知道这个小提琴有其他原因，但实际上我使用的是 Font Awesome，它看起来像那里（但在我的代码中没有 <br>）。

Answer 1

您可以使用Flexbox 来执行此操作

.container {
  display: flex;
}
.col-3 {
  flex: 1;
  border: 1px solid black;
  margin: 5px;
}

<div class="container">
  <div class="col-3"><i class="fa fa-tint fa-5x" aria-hidden="true">pic</i><br>Hello user!</div>
  <div class="col-3"><i class="fa fa-home fa-5x" aria-hidden="true">pic</i><br></div>
  <div class="col-3"><i class="fa fa-map-marker fa-5x" aria-hidden="true">pic</i><br>Test</div>
</div>