如何调整列的高度以匹配兄弟姐妹？

Question

我有许多列，每个列包含不同数量的内容。如何自动尺寸大小，以使每个列的高度与最满足最多的一列匹配？

.col {
  display: inline-block;
  float: left;
  width: 200px;
  min-height: 100px;
  background-color: #eee;
  margin-right: 20px;
  padding: 10px;
}

<div class="col">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>

<div class="col">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

Answer 1

不要在2022年使用float来对准目的。 float用于在文本块中浮动元素，而不是为了对齐目的。改用Flexbox或CSS网格。唯一适当的用例是电子邮件设备。

您需要做的就是包裹列并应用显示：flex到包装元素。

.row {
  display: flex;
}

.col {
  width: 200px;
  min-height: 100px;
  background-color: #eee;
  margin-right: 20px;
  padding: 10px;
}

<div class="row">
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>

  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>

Answer 2

• 将内容包装到显示：flex。这将使直接的子元素灵活。在简单的语言中，彼此相邻的if（flex方向：行）。
  - 然后flex-items flex容器的孩子。现在，您的问题已经解决。但是，要使您的布局更加灵活，我将解释flex：1 0 calc（100％/3-30px）;在这里设置flex：1时，它将使所有孩子相同的大小。但是，如果添加更多元素，它将通过挤压它们将它们全部彼此设置。为了阻止它们在一定尺寸后挤压，我们使用flex-basis。因此，在这里计算（100％/3-30px）;这里100％/3将3个孩子置于行减去30px AS gap：15px也需要从儿童的每一方面计数SO 2*15px是30px。
  - 是的flex-wrap：包装将把第四元素分解为新行。

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /*To give some space*/
}

.row .col {
  flex: 1 0 calc(100% / 3 - 30px);
  background-color: #eee;
  padding: 10px;
}

<div class="row">
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>

  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>