图片默认 inline 并排，换行主因是容器窄、HTML 空白符、display 变更或 vertical-align 异常；推荐 flex 布局（兼容 gap/等高/响应式），次选 inline-block（需 vertical-align:top 且消除空白）。
两张图片默认就在同一行，除非它们被强制换行或容器太窄
为什么图片突然换行了？常见原因和检查点
浏览器里
是 inline 元素，天然会并排显示——但只要出现以下任一情况，就会“掉下去”：
父容器宽度不够：两张图片总宽（含 margin/padding/border）超过容器宽度
图片之间有空格或换行符：HTML 中的空白符会被渲染为一个空格，可能挤占空间
CSS 里写了
或
等布局方式，改变了默认行为
某张图加了
以外的值（比如
），导致基线对齐异常，视觉上像错位或换行
最稳的 inline 并排方案：用
不依赖浮动、不改文档流，兼容性好（IE8+），适合简单场景：
关键点：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须加
（或其他确定值），否则默认按 baseline 对齐，底部文字间隙会导致“下移”
避免 HTML 换行：把两个
写在同一行，或用注释消除空白：
如果需要间距，用
，别靠空格
现代推荐：用
控制更可靠
父容器设
，子元素（图片）自动并排，无视空白符、无视 inline 特性：
优势明显：
直接控制间距，不用手动算 margin
图片自动等高（默认
），无需额外处理高度差
支持响应式：加
后小屏自动换行，大屏保持一行
注意 IE10/11 需要加
前缀，但仅限老项目
真正卡住人的往往不是“怎么放”，而是没意识到图片默认是 inline 元素，又忽略了空白符和 vertical-align 的影响。flex 是目前最省心的选择，但 inline-block 在极简页面里依然够用——关键是别让 margin 和空格偷偷吃掉那几像素。
display: blockdisplay: flexvertical-align: top/middle/bottomtext-bottomdisplay: inline-block
vertical-align: topmargindisplay: flexdisplay: flex
gapalign-items: stretchflex-wrap: wrap-ms-flexbox