三列等高图片和标语不起作用

以下是一个基于Flexbox的解决方案，可以实现三列等高的图片和标语布局：

HTML代码：

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <img src="image1.jpg" />
        <div class="card-body">
          <h3>标语1</h3>
          <p>描述1</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <img src="image2.jpg" />
        <div class="card-body">
          <h3>标语2</h3>
          <p>描述2</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <img src="image3.jpg" />
        <div class="card-body">
          <h3>标语3</h3>
          <p>描述3</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-body {
  padding: 20px;
}

img {
  width: 100%;
  height: auto;
}

这个方案中，我们使用Flexbox布局来实现等高列。我们首先将容器设置为“display：flex”，使其成为Flex容器。接下来，我们在Flex容器中放置三个Flex项目，每个Flex项目都代表一列。我们将Flex项目设置为“display：flex”，这使其成为一个包含图片和标语的Flex项目。我们还将“flex-direction”设置为“column”，以便项目中的元素成为列而不是行。最后，我们将“justify-content”设置为“space-between”，使得项目在垂直方向