Question

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

＆＃13;

    body {
      background-color: #4c505d;
    }

    .container {
      background-color: #fff;
      margin: 12% 14%;
      width: 76%;
    }
    section {
      width: 64.5%;
    }

＆＃13;

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

＆＃13;

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

PS。我知道这个小提琴有其他原因，但实际上我使用Font Awesome并且它看起来像那里（但在我的代码中没有<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>）。

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>

高度与其他列相同的列

1 个答案: