并排显示图片最稳用 display: inline-block 配 vertical-align: top，避免基线对齐留白；需设宽高或 aspect-ratio 防抖动；兼容 ie11 时优先此法，现代项目推荐 flex。
两张图片并排显示用 display: inline-block 最稳
直接设 img 为 inline-block，配合 vertical-align: top 防止底部留白，比浮动或 Flex 更少意外。默认 img 是 inline 元素，但会受行内基线对齐影响，导致下方多出几像素空白。
常见错误现象：margin 看似设了却没效果、两张图一上一下、右侧图掉到下一行。
- 给两张
img都加display: inline-block和vertical-align: top - 父容器别设
white-space: nowrap以外的文本相关样式，否则可能干扰换行逻辑 - 如果图宽加起来超容器宽度，它们会自动换行——这不是 bug，是 inline 布局本性
想严格等宽并列？用 flex 更可控
当需要两张图占满父容器、中间留固定间隙、或响应式缩放时，display: flex 是更现代也更可靠的方案。它不依赖文本流，也不吃基线对齐的亏。
使用场景：卡片式布局、产品对比图、表单旁的示意图。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子img默认等高对齐 - 用
gap: 8px控制间距（注意 safari 旧版本需用margin替代） - 加
flex: 1让两张图均分宽度；若要固定宽，直接设width并加flex-shrink: 0
Float 还能用吗？能，但得清浮动
老项目里还能见到 float: left，但它会脱离文档流，导致父容器高度塌陷——这是最常被忽略的坑。
错误现象：父 div 看不见边框、背景色只盖住第一张图、后续元素往上跑。
- 两张图都加
float: left，并确保父容器有明确宽度（百分比或像素） - 必须在父容器末尾加一个清除元素：
<div style="clear: both"></div>，或用伪类::after清除 - 移动端慎用：
float对响应式支持弱，缩放后容易错位
图片加载慢导致布局抖动？提前占位很关键
两张图宽高不固定时，浏览器先渲染空盒，图一加载完就突然撑开页面——用户看到“跳动”，体验差。这不是 CSS 能单独解决的问题。
性能影响：无占位会触发重排（reflow），尤其在列表中反复出现时，滚动卡顿明显。
- 给每张
img显式设置width和height（即使只是预估比例） - 用
aspect-ratio（chrome 88+、firefox 89+ 支持）替代固定尺寸，例如aspect-ratio: 4/3 - 配合
Object-fit: cover防止拉伸变形，但注意 IE 完全不支持
实际写的时候，多数情况用 flex 就够了；但如果要兼容 IE11，就得退回 inline-block + vertical-align，且务必检查所有父级有没有意外的 font-size: 0 或 line-height 干扰。