如何让不同文本长度的卡片内按钮统一固定在div底部

核心通过Flex布局的自动外边距特性实现，仅需修改CSS即可，无需调整现有HTML结构：

需新增/调整的CSS样式 #

/* 原有pricing-block样式保留，新增以下样式 */
.pricing-cards {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 可按需添加卡片的装饰样式，比如内边距、边框、背景色等
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  */
  /* 按需设置卡片宽度，保证一行可放4张 */
  width: 22%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.pricing-button {
  margin-top: auto;
  /* 按钮原有样式可保留，这里仅新增margin-top规则 */
}

实现逻辑说明 #

• 父容器.pricing-block已经是Flex布局，会自动让同一行的所有.pricing-cards高度保持一致，对齐最高的卡片高度
• 给.pricing-cards设置垂直方向的Flex布局后，margin-top: auto会自动占据按钮上方所有剩余的空白空间，把按钮向下推到卡片最底部，完全不受上方文本内容长度影响
• 即使后续修改卡片内的文本内容、增删功能项，按钮都会自动固定在底部，无需额外调整样式

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