无固定高度时父Div内子Div底部垂直对齐方案求助

针对该布局需求，以下是兼容Chrome 109、Firefox 115.23等旧版浏览器的实现方案，无需flex/grid/table布局或JS：

核心思路 #

借助伪元素的height: 100%配合vertical-align: bottom实现底部对齐逻辑，同时通过调整父元素的高度规则，确保子元素高度超过最小阈值时，父元素能自动扩展高度。

修改后的代码 #

CSS 代码 #

.inner {
  display: inline-block;
  vertical-align: bottom;
  background: yellow;
  height: min-content;
  padding-top: 10px;
  min-height: 30px;
  width: 100%;
}

.block {
  background: orange;
  min-height: 180px;
  width: 200px;
  display: inline-block;
  /* 关键：不设置固定height，仅保留min-height让父元素可自适应 */
}

.block:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  height: 100%;
  width: 0; /* 避免伪元素占用水平空间 */
}

HTML 代码 #

<div class="block">
  <div class="inner">Inline-Block</div>
  <div class="inner">Inline-Block</div>
</div>

实现说明 #

1. 父元素block仅保留min-height: 180px，不设置固定height，确保初始高度不低于180px，当子元素总高度超过该值时，父元素会被自动撑开。
2. 伪元素:before设置height: 100%和vertical-align: bottom，同时用width: 0消除水平占位，为子元素提供底部对齐的基准线。
3. 子元素inner设置为inline-block并配合vertical-align: bottom，会自动对齐到伪元素的底部，实现与父元素底部对齐的效果。
4. 当子元素总高度超过父元素min-height时，父元素高度随内容自动扩展，伪元素的height: 100%也会同步适配新高度，保持对齐逻辑有效。

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