用 Flex 布局最可靠：父容器设 display: flex 且 align-items: flex-start，图片设 max-width: 100% 和 height: auto；兼容 IE 时用 font-size: 0 + inline-block + vertical-align: top 并删除标签间空格。
两张图片怎么对齐显示（HTML 布局基础）
浏览器默认把
当作行内元素，直接并排写两个
标签，它们会像文字一样从左到右排列——但只要中间有空格、换行或文本节点，就会产生间隙；加上图片默认基线对齐（
），底下留白，看起来就“错位”了。
确保两图紧挨着写，中间
不要换行或空格
：
给图片加
或
，消除基线对齐导致的底部空白
更稳妥的做法是统一设为块级 + 水平排列：
配合
，或直接用
容器
用 Flex 布局让两张图片严格对齐（现代推荐方案）
Flex 是目前最可控、语义最清晰的方式，尤其适合“并排、等高、居中、响应式”这类需求。父容器设
后，子
会自动按主轴排列，高度自动拉齐，不用手动算 margin 或 line-height。
父容器加
，两图自然左对齐并排
加
防止图片被拉伸（默认是
）
如果要居中对齐，用
图片本身建议设
和
，避免溢出容器
图片尺寸不一致时怎么视觉对齐（宽高差异处理）
现实中两张图往往宽高比不同，强行设相同
或
会导致变形。真要“对应”，得明确你指哪一种对齐：
若想顶部对齐：父容器
（Flex 下默认就是）
若想底部对齐：用
若想等高且裁剪显示：给图片容器设固定高，
若想等比例缩放但保持各自宽高比：不设固定高，只设
，靠 Flex 自动对齐顶部
常见错误是给
直接设
，结果一张图被压扁，另一张被拉长——除非你确定它们原始比例一致，否则别碰
固定值。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
IE 兼容场景下怎么安全对齐（老浏览器兜底）
IE10–11 对 Flex 支持有限（比如不支持
、某些
值异常），如果必须兼容，优先退回
方案：
父容器清除字体大小影响：
图片设
+
图片自身恢复字体大小（如需文字说明）可单独设回
注意：IE 下
仍可能因 HTML 换行产生 4px 左右间隙，所以务必删掉标签间的空格或换行，或者用注释“消除”：
。
两张图片是否“对应”，本质是你想对齐什么：位置？尺寸？语义关系？布局只是手段，关键先想清楚“对应”在你的场景里到底指什么——比如是不是其实该用
+
来表达图文关联，而不是单纯排版。
vertical-align: baselinevertical-align: topmiddledisplay: blockfloat: leftdisplay: flexdisplay: flexdisplay: flexalign-items: flex-startstretchjustify-content: centermax-width: 100%height: auto
widthheightalign-items: flex-startalign-items: flex-endobject-fit: covermax-widthheight: 200pxheightflex-wrapalign-itemsdisplay: inline-blockfont-size: 0display: inline-blockvertical-align: topfont-size: 16px
inline-block