如何使文字环绕图像而不留空格或换行符？

Question

我想让文字环绕图像（这是我实现的），并且当换行时不要在图像周围留空格。

<div id="container1">
  <div id="container2" style="width: 300px">
    <font color="black">
       <h1 class="customfonter">Title</h1>
       <img src="https://via.placeholder.com/530x400" width="34%" height="auto" style="float: left; margin-right:1%;margin-top:1%;">
    <pre style="width: auto;white-space: pre-wrap;word-wrap: break-word;">Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext  <a id="link" href="#">more</a></pre>
    </font>
  </div>
<div>

Answer 1

我找不到所需的解决方案，因此我选择使用margin-bottom来确保图片下方没有文字。

我制作的脚本通过问题中的HTML自动更改了下边距的高度：

setInterval(refresh, 1000/30);
function refresh() {
   ih = document.getElementsByTagName('img')[0].getBoundingClientRect().height;
   ph = document.getElementsByTagName('pre')[0].getBoundingClientRect().height;
   document.getElementsByTagName('img')[0].style.marginBottom = `${Math.abs(ph - ih)}px`;
}

<div id="container1">
  <div id="container2" style="width: 300px">
    <font color="black">
       <h1 class="customfonter">Title</h1>
       <img src="https://via.placeholder.com/530x400" width="34%" height="auto" style="float: left; margin-right:1%;margin-top:1%;">
    <pre style="width: auto;white-space: pre-wrap;word-wrap: break-word;">Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext  <a id="link" href="#">more</a></pre>
    </font>
  </div>
<div>

Answer 2

尝试以 line-height （行高）使文本最适合，或为图像设置 margin-right （边距右），以使文本和图像之间具有相同的“空白” / p>