用 display: inline-block 并配合 vertical-align: top 可稳定实现图片并排，兼容 IE8+；推荐 flex 布局应对响应式与等宽需求，注意 gap、flex-wrap 和 box-sizing 等细节。
用 display: inline-block 让图片并排最稳
默认情况下 <img alt="如何在html5中并排放入两张图片" > 是行内元素，但会受换行符、空格影响产生间隙，直接写两行 <img alt="如何在html5中并排放入两张图片" > 标签大概率不会紧贴并排。用 display: inline-block 能明确控制行为，兼容性好（IE8+），且不破坏文档流。
实操建议：
- 给两张图片都加
style="display: inline-block; vertical-align: top;"，vertical-align必须设（否则按基线对齐，底部留白） - 父容器不要有
font-size: 0这类 hack——它会影响子元素内文字，且在响应式中易出问题 - 图片宽度建议用
width显式控制（比如width: 48%），避免因原始尺寸差异导致换行
flex 布局适合需要对齐或等宽的场景
如果两张图要居中、等宽、间距固定，或者未来可能加第三张，flex 是更现代也更可控的选择。但它在 IE10 以下不支持，且父容器需设 display: flex。
常见错误现象：只给图片加 display: flex（无效），或忘了设 flex-wrap: nowrap（小屏幕可能换行）。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
<div style="display: flex; gap: 8px;"> <img src="a.jpg" style="max-width:90%" alt="如何在html5中并排放入两张图片" > <img src="b.jpg" style="max-width:90%" alt="如何在html5中并排放入两张图片" > </div>
gap 控制间距，flex: 1 让它们等宽自适应；若需固定宽度，就用 width 替代 flex。
别忽略 img 的默认 vertical-align
这是最容易被跳过的坑：即使用了 inline-block 或 flex，如果图片是行内上下文（比如包裹在 <p></p> 里），它的默认 vertical-align: baseline 会让底边对齐文字基线，造成下方多出几像素空白——看起来像“没并排”，其实是“没对齐”。
解决方式很简单：
- 统一加
vertical-align: top或vertical-align: middle - 或者把图片设为
display: block（但此时必须配合float或flex才能并排） - 检查父元素是否有
line-height过大，也会放大这个间隙
响应式下两张图并排容易失效
写死 width: 50% 在小屏上常会溢出或换行，尤其当图片带边框、内边距或父容器有 padding 时。
安全做法：
- 用
box-sizing: border-box确保padding和border不撑大宽度 - 媒体查询里及时切回垂直排列：
@media (max-width: 768px) { .img-container { flex-direction: column; } } - 避免用
float实现并排——清除浮动麻烦，且和现代布局混用时容易冲突
真正麻烦的不是怎么放并排，而是怎么让它们在不同设备上都“看起来是并排的”——间隙、对齐、缩放、加载失败占位，每个细节都会暴露出来。
