Radiate主题图片对齐需用语义化figure类而非align或float：figure--left/figure--right实现图文环绕，figure--full全宽居中；其底层依赖CSS Grid而非float，桌面端通过grid-column定位，移动端自动退为单列；失效主因是figure缺失、父容器阻断Grid继承或自定义CSS覆盖。
HTML 图片对齐代码在 Radiate 主题里根本不用手写
Radiate 主题默认不支持传统 align 属性或 float 类控制图片左右浮动——它用的是 CSS Grid + 自定义 class 的响应式布局体系，硬塞 align="right" 或 style="float:left" 不仅无效，还会破坏流体排版。
真正起作用的是 Radiate 内置的三类语义化图片容器 class：
-
figure--left：图片左对齐，文字环绕右侧（移动端自动退化为上下结构） -
figure--right：图片右对齐，文字环绕左侧 -
figure--full：强制占满容器宽度，居中显示（适合 banner 或强调图）
用法很简单，把原生 <img> 包进 <figure>，再加对应 class：
<figure class="figure--right"> <img src="/images/chart.png" alt="性能对比图"> </figure>
Radiate 的 figure--right 实际生效靠的是 CSS Grid 而非 float
很多人以为加了 figure--right 就是触发了 float:right，其实 Radiate 完全弃用了 float。它的实现依赖两个关键点：
立即学习“前端免费学习笔记（深入）”；
- 父容器
<article>必须有display: grid布局（主题已预设） -
figure--right本质是设置grid-column: 2，把图片塞进右侧轨道，文字内容则在grid-column: 1的左侧轨道流动 - 这个网格结构只在桌面端（
min-width: 768px）激活；小屏下自动切换为grid-column: 1 / -1，即整行独占
所以如果你手动给 <img> 加了 style="float:right"，反而会和 Grid 冲突，导致图片错位或文字塌陷。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
常见失效场景：figure 标签缺失、父容器被覆盖、自定义 CSS 干扰
即使写了 figure--right，图片还是居中不动？先检查这三点：
- 没用
<figure>包裹 ——figure--right是专为<figure>设计的 class，直接加在<img>上无效 - 文章内容被包裹在自定义
<div class="content">之类容器里，且该容器设置了display: block或overflow: hidden，切断了 Grid 继承链 - 你在
custom.css里写了figure { margin: 0 }或重置了grid-template-columns，覆盖了 Radiate 默认规则
验证方法：打开浏览器开发者工具，选中 <figure> 元素，看 computed styles 里是否出现 grid-column: 2 和 display: grid 父级样式。
响应式断点值不能改，但可以微调文字环绕间距
Radiate 把响应式断点写死在主题 CSS 里：@media (min-width: 768px) 是唯一触发双栏布局的阈值，改它需要重新编译 SCSS，不推荐。
但你可以安全调整环绕效果的松紧度：
- 增大图片和文字之间的空隙：在
custom.css里加.figure--right { margin-left: 1.5rem; } - 缩小文字环绕区域的行宽（避免过窄影响阅读）：加
.figure--right + p, .figure--right + h3 { max-width: 65ch; } - 注意不要碰
grid-column-gap—— Radiate 用的是固定轨道定位，不是 gap 控制间隔
真正难调的其实是图文比例：Radiate 默认按 3:7 分配左右轨道宽度，如果图片太宽，文字栏会被压缩到难以阅读的程度。这时候得换思路——要么裁剪图片，要么改用 figure--full 配合文字说明，别硬撑环绕。
