如何将按钮对齐至div底部？多水平盒子按钮末端对齐问题

要实现按钮固定在.leveltext容器底部，同时和其他水平排列盒子的按钮对齐，只需调整以下CSS代码：

1. 修改.leveltext的布局样式 #

将.leveltext设置为垂直方向的flex容器，利用空间分配属性把按钮推到底部：

.leveltext {
  height: 261.44px;
  width: 100%;
  padding: 15px;
  padding-top: 10px;
  background-color: #000;
  color: white;
  text-align: center;
  /* 添加flex布局相关属性 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box; /* 防止padding撑大容器宽度 */
}

2. 简化.button1的样式 #

父容器已改为flex布局，移除多余的对齐属性，保留居中即可：

div.button1 {
  display: flex;
  justify-content: center;
  margin-top: 15px; /* 可选：给按钮和上方文本添加间距 */
}

效果说明 #

• flex-direction: column让.leveltext内的元素垂直排列
• justify-content: space-between会自动将文本内容推到顶部、按钮推到底部，无论文本长度如何，按钮都固定在容器底部
• 配合你已设置的.levelbox固定高度500px，所有水平排列盒子的按钮会自然对齐在同一垂直线上

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