时间戳

首页 > 解决方案 > 您如何使文本在图像下方流动？

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

问题描述

在我的 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;
}

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

在此处输入图像描述

但是你可以看到，如果段落变长，它只会继续向下流动，并推动图像变小。有没有办法让它变得更长，如果段落变长，它只会流动和填充而不会使图像变小？这就是我的意思： 在此处输入图像描述

任何帮助表示赞赏，谢谢！

标签： htmlcssimageparagraph

解决方案

让文本在图像下方流动的一种直接方法是删除 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>

推荐阅读