如何在html5中并排放入两张图片

用 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;">   @@##@@   @@##@@ </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 实现并排——清除浮动麻烦，且和现代布局混用时容易冲突

真正麻烦的不是怎么放并排，而是怎么让它们在不同设备上都“看起来是并排的”——间隙、对齐、缩放、加载失败占位，每个细节都会暴露出来。