使列中的子项都具有相同的高度[重复]答案

【问题标题】：Make child items in columns all the same height [duplicate]使列中的子项都具有相同的高度[重复]
【发布时间】：2018-04-15 23:14:57
【问题描述】：

我在列中有几个不同高度的元素（div 中的文本并不总是相同），因此所有 .top 元素都需要彼此高度相同，所有 .bottom 元素都需要与所有 .bottom 元素的高度相同。我知道这可以用 javascript 完成，但我不想使用它。这可以在 CSS 中完成吗？

<div class="row">
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
</div>

【问题讨论】：

我链接到 2 个帖子，一个使用 CSS，您需要更改标记，第二个使用脚本，如果不更改标记。

标签： html css flexbox

【解决方案1】：

是的，它可以用 CSS 来完成。这将是一种方法。

.row {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 15px;
  width: 33%;
}

<div class="row">
  <div class="col" style="background: blue;">
    <div class="top">
      <p>Lorem ipsum Lorem ipsum</p>
      <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: yellow;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: red;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
</div>

添加了等宽列。

【讨论】：

你读过这个问题吗？ all .top elements need the be de same height as each other, and all .bottom elements needs to be the same height as all .bottom elements
哎呀！我现在修改...谢谢@TemaniAfif
谢谢，但这不起作用，因为所有列的宽度必须相同；-)
@user759235 当它显然不起作用时，为什么要接受它？ ...顶部元素或底部元素行的高度都不相等。