父DIV内嵌套的两个子DIV如何实现底部对齐的CSS布局

需求对齐规则 #

• 父容器.box1内垂直排列两个子元素.box2、.box3
• .box2的底部与.box3的顶部完全贴合无间隙
• .box3的底部与父容器.box1的底部完全对齐

推荐方案：Flex弹性布局（无硬编码、自适应子元素高度变化） #

实现逻辑：给父容器开启纵向弹性布局，设置主轴对齐方式为终点对齐，所有子元素会自动靠父容器底部堆叠，相邻子元素边缘自然贴合，后续修改任意子元素高度都不需要调整CSS代码。

完整可运行代码如下：

/* CSS样式代码 */
.box1 {
  width: 315px;
  height: 300px;
  background-color: #FFF;
  /* 新增布局属性 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.box2 {
  width: 315px;
  height: 48px;
  background-color: #000;
}

.box3 {
  width: 315px;
  height: 38px;
  background-color: #000;
}

HTML结构保持原有写法无需调整：

<!-- HTML结构代码 -->
<div class="box1">
  <div class="box2"></div>
  <div class="box3"></div>
</div>

备选方案：绝对定位（兼容极低版本浏览器） #

实现逻辑：给父容器设置相对定位作为定位上下文，两个子元素设置绝对定位，通过bottom属性直接锁定到对应对齐位置。注意该方案需要硬编码偏移值，如果后续修改.box3的高度，需要同步调整.box2的bottom值。

对应CSS代码如下：

/* CSS样式代码 */
.box1 {
  width: 315px;
  height: 300px;
  background-color: #FFF;
  /* 新增：父容器作为定位上下文 */
  position: relative;
}

.box2 {
  width: 315px;
  height: 48px;
  background-color: #000;
  /* 新增：定位到box3上方，偏移值等于box3高度 */
  position: absolute;
  bottom: 38px;
  left: 0;
}

.box3 {
  width: 315px;
  height: 38px;
  background-color: #000;
  /* 新增：定位到父容器底部 */
  position: absolute;
  bottom: 0;
  left: 0;
}

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