本文介绍如何通过一行 CSS 代码（display: flex）解决图片垂直堆叠问题，实现简洁、可靠且现代的水平图库布局，兼容主流浏览器并易于维护。
本文介绍如何通过一行 css 代码（`display: flex`）解决图片垂直堆叠问题，实现简洁、可靠且现代的水平图库布局，兼容主流浏览器并易于维护。
默认情况下，块级元素（如 <div>）会独占一行，导致 <code>.column 容器内的图片纵向堆叠。你当前的代码已为 .column 设置了 float: left，并用 .row:after 清除浮动——这是一种传统方案，但易受父容器高度塌陷、响应式断点、间隙控制等限制。
最简且推荐的解决方案是启用 Flexbox 布局：
.row {
display: flex;
gap: 10px; /* 可选：统一控制图片间距，替代手动 padding */
flex-wrap: wrap; /* 可选：当容器宽度不足时自动换行 */
}✅ 为什么只需 display: flex？
Flexbox 将 .row 设为弹性容器，其子元素（即每个 .column）默认沿主轴（水平方向）排列，无需浮动、清除或额外定位。它天然支持对齐、间距、伸缩与响应式行为。
⚠️ 注意事项：
- 移除
.row:after的清除浮动代码（display: table; clear: both），因为 Flexbox 不依赖浮动机制；保留会导致冗余甚至样式冲突。 - 若需图片等宽自适应（如在小屏上单列显示），可添加
flex-wrap: wrap并配合flex: 1 1 200px到.column，但当前固定宽度（width: 500px）适用于大屏展示，建议改用相对单位（如flex: 0 0 calc(33.333% - 10px)）提升灵活性。 - 确保 HTML 结构语义清晰：
.column仅包裹单张图片，避免嵌套干扰 Flex 排列。
? 进阶提示：
如需居中对齐或两端对齐，可追加：
.row {
justify-content: center; /* 水平居中 */
/* 或 justify-content: space-between; —— 两端对齐，首尾贴边 */
}综上，将 display: flex 应用于 .row 是现代、简洁、健壮的解决方案，既修复了垂直堆叠问题，也为后续响应式优化打下基础。
