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

Posted 2023-03-05

【中文标题】高度与其他列相同的列[重复]

【英文标题】：Columns with height same as other columns [duplicate]

【发布时间】：2016-10-05 02:25:09

【问题描述】：

我有制作列的代码。在本专栏中，我将有文字，但文字的高度不同，有没有办法让 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>）。

【参考方案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>  

【讨论】：

刚刚想通了。 （已删除边距）

是的，你可以删除 margin-top jsfiddle.net/Lg0wyt9u/940