如何在Xaringan幻灯片中插入环绕文本的图片

Xaringan没有LaTeX中wrapfigure那样的原生命令，但可以通过CSS浮动或flex布局轻松实现文本环绕图片的效果，以下是两种实用方案：

方案1：行内CSS快速实现单张图片环绕 #

适合仅在单张幻灯片中使用的场景，直接给图片添加行内样式：

<img src="img1.jpg" style="float: right; width: 35%; margin-left: 1em; margin-bottom: 0.5em;" alt="示例图片">

这里输入需要环绕的文本内容，当图片设置为右浮动后，后续文本会自动在图片左侧排列，直到文本高度超过图片，就会恢复全屏宽度。如果需要添加图片标题，可以用小字号文本配合清除浮动：

<p style="font-size: 0.8em; text-align: right; clear: right;">图1：右侧浮动的环绕图片</p>

如果要实现左侧环绕，只需把float: right改成float: left，同时调整margin-left为margin-right，标题对齐方式改为左对齐即可。

方案2：全局CSS类复用 #

如果需要在多张幻灯片中使用环绕图片，建议在幻灯片开头定义全局CSS类，方便重复调用：

---
title: 文本环绕图片演示
output:
  xaringan::moon_reader:
    css: ["default"]
---

```{css, echo=FALSE}
/* 定义左右浮动图片的类 */
.wrap-right {
  float: right;
  width: 35%;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
.wrap-left {
  float: left;
  width: 35%;
  margin-right: 1em;
  margin-bottom: 0.5em;
}
/* 图片标题样式 */
.caption-right {
  font-size: 0.8em;
  text-align: right;
  clear: right; /* 确保标题不被文本环绕 */
}
.caption-left {
  font-size: 0.8em;
  text-align: left;
  clear: left;
}

右侧环绕示例 #

这里输入环绕文本，内容可以尽可能长一些，测试文本环绕的效果。使用全局类后，后续添加环绕图片只需调用对应的class即可。

图1：右侧浮动的环绕图片

左侧环绕示例 #

这里是左侧图片的环绕文本，文本会自动在图片右侧排列，直到文本高度超过图片后恢复全屏宽度。

图2：左侧浮动的环绕图片

注意事项 #

• 若文本过短导致图片与下一个元素重叠，可在需要换行的位置添加<div style="clear: both;"></div>清除浮动，避免布局混乱。
• 可以根据需求调整width的百分比或具体数值，以及margin的大小来优化排版。

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