如何在GitHub的README.md中横向堆叠图片？

嘿，我来帮你搞定这个图片并排的问题～你之前的写法没生效，大概率是因为GitHub的Markdown渲染引擎默认会把带换行的<img>标签当成独立的块元素处理，导致它们自动换行。下面给你几种靠谱的解决方案：

方法1：使用Flex布局（最推荐） #

用HTML的<div>容器包裹图片，通过display: flex强制横向排列，还能轻松控制图片间距，兼容性拉满：

<div style="display: flex; gap: 15px;">
  <img src="screenshots/tool.png" width="200" alt="工具界面截图" />
  <img src="screenshots/world_flash.png" width="200" alt="世界闪屏截图" />
</div>

• gap: 15px可以调整图片之间的间距，根据你的需求改数值就行
• 加上alt文本不仅更友好，还符合无障碍规范

方法2：把图片标签写在同一行 #

如果不想用flex，也可以尝试把两个<img>标签紧贴着写在同一行，避免渲染引擎解析换行符导致换行：

<img src="screenshots/tool.png" width="200" alt="工具界面截图" /><img src="screenshots/world_flash.png" width="200" alt="世界闪屏截图" />

⚠️ 注意：如果图片总宽度超过README的容器宽度，还是会自动换行，所以这种方法适合图片宽度较小的场景。

方法3：使用浮动布局（备选） #

通过float: left让图片靠左排列，最后记得清除浮动避免影响后续内容：

<img src="screenshots/tool.png" width="200" style="float: left; margin-right: 15px;" alt="工具界面截图" />
<img src="screenshots/world_flash.png" width="200" style="float: left;" alt="世界闪屏截图" />
<div style="clear: both;"></div>

这种方法要额外加清除浮动的<div>，不然下面的文字会跑到图片旁边，不如flex省心。

内容的提问来源于stack exchange，提问作者Rango