Css 底部对齐反应引导卡.Img

我是一名网络开发新手，尝试用React&React引导程序做一个小项目

我有一些卡片，想把它们里面的图片对齐在底部。我已在下图中说明了当前情况以及我希望如何重新安排较小的图像：

我的代码：

const Catalog = () => {
  return (
    <>
      <Row>
        {products.map((product) => (
          <Col sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </>
  );
};

const Product = ({ product }) => {
  return (
    <Card className="my-3 p-3 rounded" border="light">
      <a href={`/product/${product._id}`}>
        <Card.Img src={product.image} variant="bottom" />
      </a>

      <Card.Body>
        <a href={`/product/${product._id}`}>
          <Card.Title as="div" className="py-3 text-left">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
      </Card.Body>
    </Card>
  );
};

const Catalog=（）=>{
返回(
{products.map（（产品）=>(
))}
);
};
常量乘积=（{Product}）=>{
返回(
);
};

有人能给我一些提示，告诉我怎样才能做到这一点吗

---

谢谢

Flexbox是一个很好的解决方案

• 应用

  display:flex

  使父级成为flex容器

• align items:flex end

  使子项与父项的底部边缘对齐

这是一个抽象的示例，但是您应该能够很容易地将这个概念带回到

和

组件的样式中

.row{
对齐项目：柔性端；
显示器：flex；
}
.卡片{
宽度：50%；
}
.卡片--高{
背景色：#fc0；
高度：200px；
}
.短卡{
背景色：#f00；
高度：150像素；
}

谢谢@simmer，据我所知，这会将所有卡与flex端对齐。我的问题是，我只需要安排图像，并有卡对齐的顶部和相同的大小。我在代码沙盒中制作了一个简单的html页面，显示了我的问题：。-基本上，我希望卡片的大小与本例相同，但所有卡片的底边都要对齐图像。啊，这是一个非常不同的问题（为了将来的参考，在您的问题中包含这些信息会很有帮助，因为这会极大地影响答案）。简而言之，您需要将图像元素包装到包含元素中，然后将这些包含元素设置为固定高度，或者使用javascript查找最高元素的高度，并将其他元素的高度设置为与该高度匹配。