如何让两段水平排列文本从两侧环绕同一张图片，有无更优实现方案？

你提到的两个问题确实是现有方案的可优化点，以下给出无需JavaScript、仅使用单张真实图片的纯CSS实现方案，可以完全规避你担心的硬编码宽度、双图错位问题。

实现思路 #

1. 采用三列Grid布局：左右两列等宽放置文本，中间列放置实际需要展示的图片，不需要手动设置列宽，中间列宽度会自动适配图片尺寸
2. 左右文本列内各添加一个透明的浮动占位元素，两个占位元素均和中间图片使用相同的shape-outside规则，自动实现文本贴合图片轮廓环绕的效果
3. 所有尺寸规则用CSS变量统一控制，更换图片时仅需要修改一处配置即可

完整代码 #

HTML结构 #

<div class="wrap">
  <p class="text-l">
    <span class="placeholder-l"></span>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
  </p>
  <div class="img-box">
    <img src="你的图片地址" alt="图片说明">
  </div>
  <p class="text-r">
    <span class="placeholder-r"></span>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
  </p>
</div>

CSS样式 #

/* 统一配置图片尺寸，更换图片仅需修改这里即可 */
:root {
  --img-w: 160px;
  --img-h: 160px;
  --img-shape: url("你的图片地址");
}

.wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
}

.text-l, .text-r {
  margin: 0;
  padding: 0 12px;
}

/* 左侧占位元素 */
.placeholder-l {
  float: right;
  width: calc(var(--img-w) / 2);
  height: var(--img-h);
  opacity: 0;
  shape-outside: var(--img-shape);
  /* 调整shape位置，匹配图片右半部分轮廓 */
  shape-margin: 4px;
}

/* 右侧占位元素 */
.placeholder-r {
  float: left;
  width: calc(var(--img-w) / 2);
  height: var(--img-h);
  opacity: 0;
  shape-outside: var(--img-shape);
  shape-margin: 4px;
}

.img-box img {
  width: var(--img-w);
  height: var(--img-h);
  display: block;
}

方案优势 #

• 无JS依赖：所有逻辑均由CSS实现，不需要动态计算图片宽度，也不需要硬编码尺寸，随机更换图片时仅需要修改:root下的三个变量即可
• 仅使用单张真实图片：不存在双图叠加的次像素错位问题，也不会产生额外的资源加载消耗
• 适配性强：不管是对称还是非对称图片，只需要调整占位元素的shape-outside参数即可实现理想的环绕效果

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