如何使两段文本从两侧环绕图像？

Question

花了很多时间后，我终于做到了：

window.onload = () => {
  const fimg = document.querySelector('#first img')
  const fimgWidth = fimg.getBoundingClientRect().width

  const simg = document.querySelector('#second img')
  const simgWidth = simg.getBoundingClientRect().width

  fimg.style.left = `${fimgWidth/2}px`
  simg.style.right = `${simgWidth/2}px`
}

div {
  display: flex;
}

p {
  flex: none;
  width: 50%;
}

img {
  shape-outside: url("https://openclipart.org/download/318603/hand-written-circle-04.svg");
  position: relative;
}

#first img {
  float: right;
}

#second img {
  float: left;
}

<div>
<p id="first">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<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. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
<p id="second">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<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. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
</div>

我认为我的意图很明确：我有两段文本水平堆叠，我在它们之间放置了一个图像，我希望它们很好地环绕这个图像。

即使上述解决方案符合我的要求，我仍然非常怀疑它是否是正确的解决方案：

• 通过 Javascript 获取图像的宽度是否表明我一定错过了一些明显的 CSS 方法？
  • 我想在此处放置一个从可用图像池中随机选择的图像，因此我不想硬编码图像的宽度
• 我不得不将此图像的两个副本叠加在一起。我真的需要有两张我想要一张的图像吗？
  • 这里没有发生这种情况，或者至少，如果发生了，它并不明显，因为我选择用来显示问题的图像太简单了，这并不重要。但是不是将图像堆叠在一起加上我在这里所做的计算是由于舍入导致图像错误地堆叠在一起的配方（一个图像相对于另一个图像在任一方向上移动一个像素）错误和sub-pixel problems?

有没有更右手的方法？

Answer 1

CSS Exclusions 在这里会有所帮助：它允许您将文本环绕在任何元素周围。不幸的是，这个规范仍然是一个工作草案，no browsers support it yet。