只在图像周围换行特定的文本？

Question

我在图像上使用float:right将文本换到左边，但是文本下面还有一些空间，我写的任何其他文本都放在图像左边。我如何使它使新的文本添加到图像的下面，而不是旁边？

到目前为止，我所尝试的只是一遍又一遍地添加
，这样文本就会出现在它应该出现的地方，但这显然不是一个好的解决方案。我确实想过只使用一个表，而不是将图像浮动到右边，但我仍然不认为那是一个好的解决方案。

这是我的代码:
HTML

        <img src="image.jpg" style="max-width: 15%;float:right;margin-right: 200px">
    <div style="margin-left:200px">
        <h1>
            <font>
                Some text
            </font>
        </h1>
    </div>

CSS:

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

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

Answer 1

我认为您可以使用flex来解决您的问题：

null

.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>