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

下面是我的示例代码：

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>

CSS：
* {
框大小：边框框；
}
/*创建四个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：25%；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
守则：
四个相等的列
第1栏
一些文字

一些文字

第2栏
一些文字

第3栏
一些文字

一些文字

一些文字

一些文字

第4栏
一些文字

一些文字

一些文字

这是我不想要的：

<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>

第1栏
第1栏
一些文字

一些文字

第2栏
一些文字

当您向框中添加更多标题（h2标记）时，它将向下推该框中的文本，但其他框保持不变。这使得所有内容都不均匀，也就是说，如果一个框中有更多的文本，那么所有其他框看起来都很奇怪

如何使一个框的标题更长，其他四个框中的其他文本将向下移动其内容，以与文本最多的框的高度相匹配

像这样：

---

我更愿意只使用HTML/CSS来实现这一点

利用flexbox和边距顶部：自动；对于底部元素，如下所示：

.container{
显示器：flex；
证明内容：中心；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
利润率：20px；
背景：rgba（0,0,0,3）；
填充：20px；
}
.文本{
页边顶部：自动；
}

标题1
标题2
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本

利用flexbox和边距顶部：自动；对于底部元素，如下所示：

.container{
显示器：flex；
证明内容：中心；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
利润率：20px；
背景：rgba（0,0,0,3）；
填充：20px；
}
.文本{
页边顶部：自动；
}

标题1
标题2
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本
标题1
一些文本一些文本一些文本

您到底想实现什么目标？我在我这边看到的和你贴的“我想要的榜样”的图片一模一样。请你再仔细一点，再精确一点好吗？更多的图片会很有用。我有4盒div。每个框内都有包含文本（标题、段落）的div。如果框中的任何一个div都有大量文本或长标题，则会导致其下方的数据下移。如果出现这种情况，那么我希望其他三个框中的div与高度相匹配。你到底想达到什么目的？我在我这边看到的和你贴的“我想要的榜样”的图片一模一样。请你再仔细一点，再精确一点好吗？更多的图片会很有用。我有4盒div。每个框内都有包含文本（标题、段落）的div。如果框中的任何一个div都有大量文本或长标题，则会导致其下方的数据下移。如果发生这种情况，那么我希望其他三个框中的div与高度匹配；当我实现这个解决方案时，所有的文本似乎都在与其他文本相关的位置，但有一个问题：所有的框现在都堆叠在另一个框的顶部。哈哈，我喜欢编码。好吧，这个解决方案行不通。看这张照片：我替换了我所有的CSS和HTML来使用你正在使用的代码，这就是我得到的；当我实现这个解决方案时，所有的文本似乎都在与其他文本相关的位置，但有一个问题：所有的框现在都堆叠在另一个框的顶部。哈哈，我喜欢编码。好吧，这个解决方案行不通。看这张照片：我替换了我所有的CSS和HTML来使用你正在使用的代码，这就是我得到的。