如何在CSS中实现文本、图片与底部元素的垂直对齐？

核心解决思路 #

放弃手动调整margin/padding的方式，改用Flexbox布局来实现精准的垂直对齐和间距控制——Flex原生支持元素对齐规则，能彻底解决手动调边距带来的误差问题。

针对.intro类的具体修改 #

直接替换原.intro的CSS代码即可：

.intro {
  display: flex;
  align-items: flex-end; /* 强制内部元素底部对齐，和下方小图保持垂直齐平 */
  gap: 160px; /* 精准设置文本与右侧大图片的间距，无塌陷无误差 */
  margin-bottom: 20px; /* 可根据需求调整与下方小图的间距，保留原布局的留白 */
}

/* 可选补充：防止右侧图片被压缩 */
.intro .intro-image {
  flex-shrink: 0;
}

效果说明 #

• 左侧文本与右侧大图片的底部会自动与容器底部对齐，自然和下方的三张小图保持垂直对齐
• gap: 160px是Flex容器的原生间距属性，直接控制两个子元素之间的距离，不会出现margin塌陷或计算偏差
• 无论文本或图片的高度如何变化，Flex都会自动维持对齐规则，不需要反复调整边距

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