如何实现inline image的文字双侧环绕？当前仅支持单侧环绕选项

如果编辑器只提供左/右环绕选项，你可以通过以下两种方式实现双侧环绕效果：

方法1：自定义CSS样式（最灵活） #

直接通过HTML和CSS手动控制文字环绕逻辑：

• 切换到编辑器的代码/HTML视图，找到图片对应的<img>标签
• 给图片添加自定义类名，同时调整基础样式：

  <img src="你的图片URL" class="double-wrap-img" alt="图片描述" style="width: 200px; height: auto;">
  

• 插入对应的CSS样式（可以放在页面的样式区域或自定义CSS面板）：

  .double-wrap-img {
    float: none;
    display: block;
    margin: 0 auto 15px; /* 上下外边距，让文字在图片两侧和下方都能环绕 */
    shape-outside: url(你的图片URL); /* 让文字贴合图片轮廓，适合不规则图片 */
    /* 如果是规则形状（比如圆形/方形），可以用更简单的写法：
    shape-outside: circle(50%); 圆形
    shape-outside: inset(0 0 0 0); 方形
    */
    shape-margin: 10px; /* 控制文字和图片的间距 */
  }
  

  核心是shape-outside属性，它能让文字围绕图片的实际轮廓排列，配合居中对齐，就能实现双侧环绕的效果。

方法2：编辑器基础设置替代（无需代码） #

如果不想写代码，试试这个简便操作：

• 选中图片，将对齐方式设置为居中对齐
• 在图片的间距设置里，给左右两侧添加10-20px的外边距
• 此时文字会自动填充图片两侧的空间，实现类似双侧环绕的效果（适合规则形状图片）

注意事项 #

• 部分老旧浏览器可能不支持shape-outside，但现代浏览器（Chrome、Firefox、Edge等）都已兼容
• 如果是在CMS平台（如WordPress），可以直接在自定义CSS中添加上述样式，无需每次编辑图片都改代码

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