如何根据Div高度对齐不同Section内Div，实现标题与数据行高匹配

直接用CSS Grid布局就能搞定，把卡片的内容容器改成网格结构，分成标题和数据两列，每一行的单元格会自动匹配高度，不管标题还是数据换行，另一边都会留出对应的空白。

核心代码实现 #

/* 卡片内容容器 */
.carousel-card-content {
  display: grid;
  grid-template-columns: auto 1fr; /* 标题列自适应宽度，数据列占剩余空间 */
  gap: 1rem; /* 列之间的间距 */
  row-gap: 0.5rem; /* 每组标题-数据之间的行距 */
}

/* 标题和数据元素 */
.carousel-card-label,
.carousel-card-data {
  align-self: start; /* 让内容从顶部对齐，避免垂直居中导致的错位 */
}

对应的HTML结构：

<div class="carousel-card">
  <div class="carousel-card-content">
    <div class="carousel-card-label">Program name</div>
    <div class="carousel-card-data">Bachelor of Science in Computer Science with a specialization in AI</div>
    <div class="carousel-card-label">Degree</div>
    <div class="carousel-card-data">Bachelor's Degree</div>
    <div class="carousel-card-label">Duration</div>
    <div class="carousel-card-data">4 years (full-time)</div>
  </div>
</div>

移动端适配 #

要实现单列布局的移动端效果，加个媒体查询调整网格列数即可：

@media (max-width: 768px) {
  .carousel-card-content {
    grid-template-columns: 1fr; /* 切换成单列，标题在上数据在下 */
  }
}

这样不管哪一边的文本换行，对应的单元格高度都会被撑起来，另一边自然就留出空白，完全符合你要的设计效果。

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