如何让HTML/CSS中同一行日期卡片高度统一？

以下是两种可靠的纯CSS解决方案，比手动固定高度或JS动态调整更稳定：

方案一：CSS Grid布局（推荐） #

Grid天生支持行内元素高度自动对齐，只需修改.day和.card的CSS：

/* 给星期容器设置7列网格布局 */
.day {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px; /* 可根据需求调整卡片间距 */
}

/* 卡片样式调整 */
.card {
  border: 1px solid #e0e0e0;
  padding: 12px;
  /* 让卡片内部内容合理分配空间 */
  display: flex;
  flex-direction: column;
}

/* 处理过长的workout内容 */
.card .workout-content {
  flex: 1; /* 占满卡片剩余空间，底部元素自动对齐 */
  overflow-y: auto; /* 内容过长时显示滚动条，避免撑高卡片 */
  max-height: 120px; /* 可选：限制最大高度，防止滚动区域过长 */
}

原理：Grid的grid-template-columns将容器分成7等份，每行的卡片高度会自动匹配该行最高的卡片，不需要额外计算。

方案二：Flex布局 #

如果更习惯用Flex，也可以通过以下设置实现：

.day {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* 强制所有卡片拉伸到同一高度 */
  gap: 10px;
}

.card {
  /* 计算7列宽度，减去6个间距的总宽度 */
  flex: 0 0 calc((100% - 60px) / 7);
  border: 1px solid #e0e0e0;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.card .workout-content {
  flex: 1;
  overflow-y: auto;
}

原理：align-items: stretch让Flex容器内的所有卡片高度拉伸到和容器一致，配合flex-direction: column让卡片内部内容合理分配空间。

为什么之前的方法没用？ #

• 固定height：内容长度不确定时，要么溢出要么留白，无法适配所有场景；
• line-height：只对单行文本垂直对齐有效，对多行或复杂内容完全没用；
• JS动态调整：需要监听内容变化、重新计算高度，容易出现布局抖动，且维护成本高。

纯CSS方案是浏览器原生支持的布局特性，性能更好，代码更简洁，能完美适配内容高度变化的场景。

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