html - 只在图像周围环绕某些文本？

Question

我float:right在图像上使用了将文本换行到它的左侧，但是文本下方仍然有一些空间，我写的任何更多文本都在图像的左侧。我怎样才能使新文本添加到图像下方，而不是旁边？

到目前为止，我所做的只是<br>一遍又一遍地添加，以便将文本放在应有的位置，但这显然不是一个好的解决方案。我确实想过只使用表格而不是将图像向右浮动，但我仍然认为这不是一个好的解决方案。

这是我的代码：

font {
  font-family: Helvetica;
  color: black;
}

img {
  max-width: 50%;
  height: auto;
}

<img src="https://stackoverflow.design/assets/img/logos/se/se-icon.png" style="max-width: 15%;float:right;margin-right: 200px">
<div style="margin-left:200px">
  <h1>
    <font>
      Some text
    </font>
  </h1>
</div>

Answer 1

我认为你可以使用flex你的问题：

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.imageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="wrapper">
  <div>

    <div class="imageWrapper">
      <img src="https://picsum.photos/150/150">
      <div>
        More Text
      </div>
    </div>
  </div>
  <div>
    <h1>
      <font>
        Some text
      </font>
    </h1>
  </div>
</div>