如何让图片在网页中水平排列（使用 Flexbox 实现响应式图库布局）

本文介绍如何通过一行 CSS 代码（display: flex）解决图片垂直堆叠问题，实现简洁、可靠且现代的水平图库布局，兼容主流浏览器并易于维护。

本文介绍如何通过一行 CSS 代码（`display: flex`）解决图片垂直堆叠问题，实现简洁、可靠且现代的水平图库布局，兼容主流浏览器并易于维护。

默认情况下，块级元素（如 <div>）会独占一行，导致 .column 容器内的图片纵向堆叠。你当前的代码已为 .column 设置了 float: left，并用 .row:after 清除浮动——这是一种传统方案，但易受父容器高度塌陷、响应式断点、间隙控制等限制。

最简且推荐的解决方案是启用 Flexbox 布局：

.row {display: flex;gap: 10px; /* 可选：统一控制图片间距，替代手动 padding */flex-wrap: wrap; /* 可选：当容器宽度不足时自动换行 */}

✅ 为什么只需 display: flex？

Flexbox 将 .row 设为弹性容器，其子元素（即每个 .column）默认沿主轴（水平方向）排列，无需浮动、清除或额外定位。它天然支持对齐、间距、伸缩与响应式行为。

注意事项：

1. 移除 .row:after 的清除浮动代码（display: table; clear: both），因为 Flexbox 不依赖浮动机制；保留会导致冗余甚至样式冲突。
2. 若需图片等宽自适应（如在小屏上单列显示），可添加 flex-wrap: wrap 并配合 flex: 1 1 200px 到 .column，但当前固定宽度（width: 500px）适用于大屏展示，建议改用相对单位（如 flex: 0 0 calc(33.333% - 10px)）提升灵活性。
3. 确保 HTML 结构语义清晰：.column 仅包裹单张图片，避免嵌套干扰 Flex 排列。

? 进阶提示：

如需居中对齐或两端对齐，可追加：

.row {justify-content: center; /* 水平居中 *//* 或 justify-content: space-between; —— 两端对齐，首尾贴边 */}

综上，将 display: flex 应用于 .row 是现代、简洁、健壮的解决方案，既修复了垂直堆叠问题，也为后续响应式优化打下基础。