GitHub Pages 中如何实现文字环绕图片的排版效果？

由于原生Markdown不支持复杂排版控制，而GitHub Pages的Markdown渲染器支持内嵌HTML和样式，你可以用以下两种方法实现需求：

方法1：内联样式方案（无需修改主题，即用即走） #

直接把原来的Markdown图片语法替换为带浮动样式的HTML图片标签即可，示例代码如下：

<!-- 左浮动图片，文字在右侧环绕 -->
<img src="pathto/myimage.png" alt="My Image" style="float: left; margin-right: 15px; margin-bottom: 10px; max-width: 40%;" />

这里填入你要显示的说明文字，文字会自动排列在图片右侧，当文字长度超过图片高度时，会自动向下环绕在图片底部。
如果不希望后续的其他博文内容参与环绕，可以在这段内容结束后添加清除浮动的标签：
<div style="clear: both;"></div>

代码里的参数可按需调整：

• margin-right：控制图片右侧和文字之间的空隙，避免两者贴在一起
• max-width：控制图片的最大宽度，避免图片过宽占满行空间
• margin-bottom：控制图片底部和下方环绕文字的空隙

方法2：全局CSS类方案（适合频繁使用该排版的场景） #

如果你经常需要用到文字环绕图片的效果，可以先在博客主题的全局CSS文件中添加通用样式：

/* 左浮动图片样式 */
.img-float-left {
  float: left;
  margin: 0 15px 10px 0;
  max-width: 40%;
}
/* 清除浮动样式 */
.clear-float {
  clear: both;
}

之后在博文中直接调用对应的类名即可，无需重复写内联样式：

<img src="pathto/myimage.png" alt="My Image" class="img-float-left" />
你的说明文字内容
<div class="clear-float"></div>

补充提示 #

• 如果需要实现图片在右侧、文字在左侧的效果，只需将float: left改为float: right，同时把margin-right调整为margin-left即可
• 如果你希望后续的正文内容也自然环绕图片，可以省略末尾的清除浮动标签

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