WordPress Elementor博客网格：摘要与按钮对齐问题咨询

针对标题、摘要长度不一致导致的按钮错位问题，仅设置最小盒子高度无法从根本解决，推荐使用以下两种CSS方案：

方案一：Flex布局固定按钮位置 #

给每个博客卡片容器设置垂直方向的Flex布局，让摘要区域自动填充剩余空间，从而把按钮推至卡片底部：

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保卡片占满网格单元格的高度 */
}

.blog-card__excerpt {
  flex: 1; /* 让摘要区域自动填充卡片内的剩余空间 */
  margin-bottom: 1.5rem; /* 给按钮预留间距 */
}

.blog-card__read-more {
  align-self: flex-start; /* 保持按钮与摘要起始位置左对齐 */
}

方案二：Grid布局分配行高 #

如果你的博客网格本身用Grid实现，可以通过给卡片内部设置网格行模板，强制标题、摘要、按钮占据不同高度区域：

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 标题自适应高度，摘要占满剩余，按钮自适应 */
  gap: 1rem;
}

.blog-card__read-more {
  justify-self: start; /* 按钮左对齐，与摘要起始位置保持一致 */
}

为什么之前的最小高度无效？ #

设置min-height仅能保证卡片有最低高度，但当内容长度超过最小高度时，卡片会被撑开，按钮仍会跟随内容末尾；内容不足时，也无法让按钮固定在底部。而Flex/Grid的弹性空间分配能让卡片内的元素按规则排布，无论内容长短都能保持按钮对齐。

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