如何通过CSS调整实现两张HTML图片在同一行显示？

嘿，这个布局问题太常见啦，我给你整理了几种实用的解决办法，你可以根据自己的场景来选：

图片默认是行内替换元素，但有时候会因为换行、父容器宽度限制或者被设置成块级元素导致上下排列。你可以给图片加上这个样式：

img {
  display: inline-block;
  /* 可选：如果两张图片高度不一样，加这个让它们垂直居中对齐 */
  vertical-align: middle;
}

这个方法简单直接，适合基础的并排需求，不过如果要更灵活地控制间距和对齐，下面的方法更优。

Flexbox是现在做横向布局最常用的工具，灵活性拉满。你只需要给图片的父容器加上Flex属性就行：
假设你的HTML结构是这样的：

<div class="img-wrapper">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
</div>

对应的CSS：

.img-wrapper {
  display: flex;
  /* 可选：控制两张图片之间的间距 */
  gap: 15px;
  /* 可选：让图片在垂直方向上居中对齐 */
  align-items: center;
}

用Flex的好处是，不管图片大小有没有差异，都能轻松调整对齐方式，而且响应式适配也很方便。

如果之后你可能需要扩展成更多图片的网格布局，用Grid会更顺手：

.img-wrapper {
  display: grid;
  /* 分成2列，每列宽度自适应图片 */
  grid-template-columns: repeat(2, auto);
  /* 图片间距 */
  gap: 15px;
  align-items: center;
}

额外注意点 #

如果你的图片之前被设置了display: block（比如为了消除默认间隙），记得把这个样式去掉或者覆盖掉，不然上面的方法可能不生效哦！

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