当其他 div 有更多数据时，如何使 4 个 div 的文本高度相等

Question

这是我拥有的示例代码：

The CSS:
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
The Code:
<h2>Four Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</div>

这是我不想要的：

<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<h2>Column 1</h2>
<p>Some text..</p>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>

当您在框中添加更多标题(h2 标签(时，它会将该框中的文本向下推送，但其他框保持不变。这会使所有内容不均匀，这意味着，如果一个框中有更多文本，那么所有其他框看起来都很奇怪。

如果一个框的标题较长，则其他四个框中的其他文本将向下移动其内容以匹配具有最多文本的框的高度，我该如何做到这一点？

喜欢这个：

我想要的例子

我宁愿只使用 HTML/CSS 来做到这一点。

Answer 1

利用弹性框和顶部边距：auto;对于底部元素，如下所示：

.container {
display: flex;
justify-content: center;
}
.box {
display: flex;
flex-direction: column;
margin: 20px;
background: rgba(0, 0, 0, .3);
padding: 20px;
}
.text {
margin-top: auto;
}

<div class="container">
<div class="box">
<h1 class="title">Title 1</h1>
<h1 class="title">Title 2</h1>
<p class="text">Some text some text some text</p>
</div>
<div class="box">
<h1 class="title">Title 1</h1>
<p class="text">Some text some text some text</p>
</div>
<div class="box">
<h1 class="title">Title 1</h1>
<p class="text">Some text some text some text</p>
</div>
<div class="box">
<h1 class="title">Title 1</h1>
<p class="text">Some text some text some text</p>
</div>
</div>