如何使文本在图像下方流动？

Question

在我的 html 中，我有这个：

<section class="mysection">
  <img src="/images/pic.png"/>
  <div class="content">
    <p class="paragraph">
     some paragraphs here....
    </p>
  </div>
</section>

在我的 CSS,

.mysection{
  display: flex;
  flex-direction: row;
}

.paragraph {
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.mysection img{
     border-radius: 50%;
     width: 200px;
     height:200px;
}

这会在左侧生成图像，在右侧生成文本，如下所示：

但是你可以看到，如果段落变长，它只会一直向下流动，并把图像推小。有没有办法让它在段落变长时，它会流动并填充而不会将图像推小？这就是我的意思：

感谢任何帮助，谢谢！

Answer 1

让文本在图像下方流动的一种直接方法是取消使用 flex 及其列，而是将图像向左浮动。

.content {
  padding: 20px;
}

.mysection img {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  background-color: lightblue;
}

<section class="mysection">
  <img src="/images/pic.png" />
  <div class="content">
    <p class="paragraph">
      some paragraphs here...."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</section>

如何使文本在图像下方流动？

How do you make text flow below an image?

html

css

image

paragraph