Hexo博客搭配Next主题如何实现两张图片在同一行显示？

方案1：直接使用HTML行内布局（无需修改主题配置，生效最快） #

直接在Markdown文件中插入HTML代码，用flex容器包裹两张图片，示例代码如下：

<div style="display: flex; justify-content: space-around; align-items: center; gap: 10px;">
  <img src="第一张图片路径" alt="图片1说明" style="width: 48%; border-radius: 4px;">
  <img src="第二张图片路径" alt="图片2说明" style="width: 48%; border-radius: 4px;">
</div>

• 可自行调整width参数控制单张图片占比，gap参数控制两张图片的间距
• 如果需要适配移动端，可额外添加flex-wrap: wrap属性，小屏幕下会自动上下排列

方案2：自定义全局CSS样式（复用性更高，适合频繁使用多图并排场景） #

1. 打开Next主题的自定义样式文件，路径一般为themes/next/source/css/_custom/custom.styl（新版Next也可放在source/_data/styles.styl，根据自身配置调整即可）
2. 新增如下样式代码：

.image-row {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.image-row img {
  width: 48%;
  border-radius: 4px;
}

3. 之后在需要并排图片的Markdown位置直接调用自定义类即可：

<div class="image-row">
  ![图片1说明](第一张图片路径)
  ![图片2说明](第二张图片路径)
</div>

方案3：使用Markdown表格实现（零配置修改，兼容性最强） #

如果不想改动任何主题代码也不想写HTML，直接用无表头的两列表格即可实现并排效果，语法如下：

|  |  |
| ---- | ---- |
| ![图片1说明](第一张图片路径) | ![图片2说明](第二张图片路径) |

• 该方式不需要调整任何样式，渲染后会自动将两张图片适配到两列宽度，唯一缺点是可自定义空间小，无法灵活调整间距

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