如何让图片在网页中水平排列（而非默认垂直堆叠）

使用 CSS Flexbox 将 .row 设为 display: flex，即可轻松实现图片水平排列，无需浮动、清除浮动或复杂布局 hack。

使用 CSS Flexbox 将 `.row` 设为 `display: flex`，即可轻松实现图片水平排列，无需浮动、清除浮动或复杂布局 hack。

在网页开发中，图片默认以块级元素（block）形式渲染，因此连续的 <div class="column"> 会垂直堆叠，即使内部图片尺寸较小。你当前代码中虽已定义 .column { float: left }，但浮动方案存在兼容性隐患、需要额外清除浮动（如 .row:after），且在现代布局中已属过时实践。

最简洁可靠的解决方案是启用 Flexbox 布局：

.row {display: flex;gap: 10px; /* 可选：添加列间间距，替代手动 padding */flex-wrap: wrap; /* 可选：允许换行，提升响应式适应性 */}

✅ 只需这一行核心声明（display: flex），即可让所有子元素（即 .column）沿主轴（默认水平）并排排列；gap 替代了原 .column 中冗余的左右 padding，使间距更可控；flex-wrap: wrap 确保在小屏幕下自动折行，避免溢出。

同时，建议移除已失效的浮动相关样式，保持 CSS 清洁：

/* 删除或注释掉以下冗余规则 *//* .column { float: left; } *//* .row:after { content: ""; display: table; clear: both; } */

完整优化后的 CSS 示例：

.row {display: flex;gap: 10px;flex-wrap: wrap;}.column {width: 150px; /* 图片宽度为主，列宽可设为固定或弹性 */padding: 10px;}.column img {opacity: 0.8;width: 100%;height: auto;cursor: pointer;border-radius: 4px;}.column img:hover {opacity: 1;}/* 其余样式（.container、#imgtext、.closebtn）保持不变 */.container {position: relative;display: none;}#imgtext {position: absolute;bottom: 15px;left: 15px;color: white;font-size: 20px;}.closebtn {position: absolute;top: 10px;right: 15px;color: white;font-size: 35px;cursor: pointer;}

注意事项：

1. Flexbox 在所有现代浏览器中支持良好（IE10+ 需加 -ms- 前缀，但 IE 已淘汰，通常无需考虑）；
2. 若需兼容极老环境，才需回退至 inline-block 或 float 方案——但本例中无此必要；
3. 避免混合浮动与 Flex 布局，会造成不可预测的渲染行为；
4. 建议将 .column 宽度设为与图片一致（如 width: 150px），或使用 flex: 0 0 auto 实现内容自适应宽度。

至此，你的照片画廊将稳定、优雅地水平展示，为首页增添专业视觉效果。