如何实现不同div元素内的按钮水平对齐且所有div等高

核心用Flex布局替代原有float布局，无需手动设置margin即可实现等高卡片+底部按钮对齐，兼容多端显示。

需要修改的CSS代码部分 #

1. 调整桌面端外层容器样式

@media screen and (min-width: 768px) {
  .snip1214 {
    margin: 0 auto;
    display: flex; /* 替换原有display:block */
    align-items: stretch; /* 子元素自动等高，默认值可省略，写出来更清晰 */
  }
}

2. 调整桌面端卡片样式

@media screen and (min-width: 768px) {
  .snip1214 .plan {
    margin: 0;
    width: 33%;
    /* 删掉原有float:left、min-height:350px、max-height:350px，高度由flex自动适配 */
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 卡片内部内容纵向排列 */
  }
  .plan-select {
    display: grid;
  }
}

3. 新增特性列表弹性占高样式

.snip1214 .plan-features {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: outside none none;
  font-size: 0.8em;
  flex: 1; /* 新增：自动撑满卡片剩余高度，将按钮挤到卡片最底部 */
}

实现逻辑 #

• 外层容器用Flex布局后，所有子卡片默认自动等高，无需写死高度限制
• 卡片内部用纵向Flex布局，特性列表设置flex:1后会自动填充剩余空间，不管三个卡片的特性列表内容长短差异多大，按钮都会固定在每个卡片的底部位置，自然实现水平对齐
• 原有.featured卡片的margin-top:-10px凸起效果不受影响，可正常保留

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