多卡片元素对齐难题求助（无法使用子网格、独立子Div）

核心思路 #

通过Flex布局统一卡片容器高度，将信息区域设为垂直Flex容器，利用margin-top: auto把按钮固定在底部，确保标题长度变化时不影响下方元素对齐。

修正后的CSS代码 #

/* 让所有swiper-slide继承最高卡片的高度 */
.swiper-slide {
  display: flex;
}

/* 卡片容器垂直布局，占满slide高度 */
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 图片区域自适应 */
.img {
  width: 100%;
}

.img img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 可选：保持图片比例 */
}

/* 信息区域占满卡片剩余高度，垂直布局 */
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px; /* 按需调整内边距 */
}

/* 统一标题样式，可选添加多行省略控制 */
.info .title p, .info > p:first-child {
  margin: 0 0 8px 0;
  /* 可选：标题最多两行，超出省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 描述区域占据中间空间，保持固定间距 */
.info > p:nth-child(2) {
  margin: 0 0 16px 0;
  flex: 1;
}

/* 按钮固定在信息区域底部 */
.btn {
  margin-top: auto;
}

.btn a {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

关键说明 #

1. swiper-slide设置display: flex，确保所有卡片高度统一为最高卡片的高度，避免因内容长度差异导致高度不一致。
2. box采用垂直Flex布局，让图片和信息区域自动填充卡片高度，保证整体结构对齐。
3. info设置flex: 1占据卡片剩余高度，内部通过垂直Flex分配空间，结合margin-top: auto将按钮推至底部。

内容的提问来源于stack exchange，提问作者pompom