技术求助：如何实现三张图片横向并排显示

嘿，我完全懂你这种翻了好多帖子却找不到适配方案的郁闷！别着急，下面这几个方法应该能帮你把三张图片稳稳排成一行：

方法1：CSS Flexbox（最推荐，简单灵活） #

这是现在前端布局的首选方案，兼容性好还容易调整。给图片的父容器设置display: flex，再控制下图片宽度和间距就行：

<div class="image-row">
  <img src="你的图片1路径" alt="图片1说明">
  <img src="你的图片2路径" alt="图片2说明">
  <img src="你的图片3路径" alt="图片3说明">
</div>

.image-row {
  display: flex;
  gap: 12px; /* 可选：设置图片间的间距，按需调整 */
}

.image-row img {
  width: 33%; /* 让三张图片平分容器宽度，也可以用固定值比如220px */
  height: auto; /* 保持图片原有比例，避免变形 */
}

要是担心容器太窄导致图片换行，还可以给父容器加flex-wrap: nowrap（不过默认就是这个值，一般不用特意加）。

方法2：CSS Grid（适合未来扩展复杂布局） #

如果之后可能需要调整布局结构，Grid会更灵活，实现一行三列超简单：

.image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接把容器分成三等分列 */
  gap: 12px;
}

.image-row img {
  width: 100%; /* 占满每一列的宽度 */
  height: auto;
}

方法3：传统inline-block（适配旧项目场景） #

这个方法要注意两个小坑：一是图片默认基线对齐会留底部间隙，二是HTML里的空格会产生额外间距，解决方式如下：

<!-- 注意：图片之间尽量不要留空格/换行，或者用注释隔开消除间隙 -->
<div class="image-row">
  <img src="你的图片1路径" alt="图片1说明"><!--
  --><img src="你的图片2路径" alt="图片2说明"><!--
  --><img src="你的图片3路径" alt="图片3说明">
</div>

.image-row img {
  display: inline-block;
  width: 33%;
  height: auto;
  vertical-align: top; /* 解决底部莫名间隙的问题 */
}

额外提醒 #

• 一定要给图片设置宽度！如果图片本身宽度超过容器的1/3，肯定会自动换行，所以用百分比或固定值控制好尺寸。
• 如果父容器有padding或边框，建议给容器加box-sizing: border-box，让宽度计算更准确，避免图片超出容器范围。

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