Html 使用缩进和对齐将文本环绕在图像周围

我想做这样的东西

问题是我需要

p

有一个缩进，并作为对齐进行对齐

我可以将图像向左浮动，然后将

h3

和

p

的显示设置为内联，但我无法设置缩进，更重要的是无法使文本对齐

---

这里是小提琴：

还有一种方法可以做到这一点。它还可以使用该属性控制图像周围的浮动文本

.wrapper{
宽度：35雷姆；
}
h3{
线高：2rem；
保证金底部：-0.6雷姆；
}
p{
文本对齐：对齐；
文本缩进：2em；
}
img{
宽度：11雷姆；
身高：11雷姆；
浮动：左；
保证金：0 2rem 1rem 0；
}
.形状{
外部形状：插图（0）；
}
.圆圈{
外形：圆形（50%）；
}

这是一个标题
但是，在最低限度上，我们需要一个实验室来进行日常工作。知识是一种美德，是一种美德，是一种美德，是一种美德。最小值
在实验室里，你可以从一个普通的消费者那里获得经验。两人或两人在一个无教区的房间里互相指责。圣奥恰塔特例外，无过失，必须
在这件事上，我的职责是保护动物。但是，在最低限度上，我们需要一个实验室来进行日常工作


外部CSS形状
但是，在最低限度上，我们需要一个实验室来进行日常工作。知识是一种美德，是一种美德，是一种美德，是一种美德。最小值
在实验室里，你可以从一个普通的消费者那里获得经验。两人或两人在一个无教区的房间里互相指责。圣奥恰塔特例外，无过失，必须
在这件事上，我的职责是保护动物。但是，在最低限度上，我们需要一个实验室来进行日常工作

我正在尝试调整无法控制HTML结构的CMS。我有一个开始的P标签。IMG在P中，实际内容（文本）在IMG标签后面。这会导致第一行文本紧挨着图像底部，而不是环绕图像。如果我在IMG上使用垂直对齐：top，那么在图像旁边会出现一行文本，其余的文本则会从下面掉下来。如何从图像顶部开始，在图像旁边获得多行文本？我只能使用CSS，不能改变HTML的结构。简单地将其向左对齐的问题是，如果它比段落高，图像将溢出div。如何防止这种情况？

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 2em;
}