图片默认 inline 并排，换行主因是容器窄、HTML 空白符、display 变更或 vertical-align 异常；推荐 flex 布局（兼容 gap/等高/响应式），次选 inline-block（需 vertical-align:top 且消除空白）。
两张图片默认就在同一行，除非它们被强制换行或容器太窄
为什么图片突然换行了？常见原因和检查点
浏览器里 <img alt="html如何让两张图片出现同一行" > 是 inline 元素，天然会并排显示——但只要出现以下任一情况，就会“掉下去”：
- 父容器宽度不够：两张图片总宽（含 margin/padding/border）超过容器宽度
- 图片之间有空格或换行符：HTML 中的空白符会被渲染为一个空格，可能挤占空间
- CSS 里写了
display: block或display: flex等布局方式，改变了默认行为 - 某张图加了
vertical-align: top/middle/bottom以外的值（比如text-bottom），导致基线对齐异常，视觉上像错位或换行
最稳的 inline 并排方案：用 display: inline-block
不依赖浮动、不改文档流，兼容性好（IE8+），适合简单场景：
<div> <img src="a.jpg" style="max-width:90%" alt="html如何让两张图片出现同一行" > <img src="b.jpg" style="max-width:90%" alt="html如何让两张图片出现同一行" > </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须加
vertical-align: top（或其他确定值），否则默认按 baseline 对齐，底部文字间隙会导致“下移” - 避免 HTML 换行：把两个
<img alt="html如何让两张图片出现同一行" >写在同一行，或用注释消除空白：<img alt="html如何让两张图片出现同一行" ><!-- --><img alt="html如何让两张图片出现同一行" > - 如果需要间距，用
margin，别靠空格
现代推荐：用 display: flex 控制更可靠
父容器设 display: flex，子元素（图片）自动并排，无视空白符、无视 inline 特性：
<div style="display: flex; gap: 8px;"> <img src="a.jpg" alt="html如何让两张图片出现同一行" > <img src="b.jpg" alt="html如何让两张图片出现同一行" > </div>
优势明显：
-
gap直接控制间距，不用手动算 margin - 图片自动等高（默认
align-items: stretch），无需额外处理高度差 - 支持响应式：加
flex-wrap: wrap后小屏自动换行，大屏保持一行 - 注意 IE10/11 需要加
-ms-flexbox前缀，但仅限老项目
真正卡住人的往往不是“怎么放”，而是没意识到图片默认是 inline 元素，又忽略了空白符和 vertical-align 的影响。flex 是目前最省心的选择，但 inline-block 在极简页面里依然够用——关键是别让 margin 和空格偷偷吃掉那几像素。
