段落不会环绕图像答案

【问题标题】：Paragraph's won't wrap around image段落不会环绕图像
【发布时间】：2018-05-30 05:18:42
【问题描述】：

这通常是一项简单的任务，但我刚刚为此浪费了一个多小时，似乎没有任何答案。

我只想在图片周围加上一些段落。我已经尝试了所有我能想到或发现的 div 和样式的组合，但都无济于事。任何帮助将不胜感激。

<div class="row">
  <div class="col-sm-12" id="aboutCol">
    <p>Class is dead,” says Foucault; however, according to Reicher, it is not so much class that is dead, but rather the absurdity, and some would say the paradigm, of class. However, the subject is interpolated into a postpatriarchialist dialectic theory that includes consciousness as a totality." Lorizzle ipsum bling bling sit amizzle, consectetuer adipiscing elit. Nizzle sapien velizzle, bling bling volutpat, suscipit , gravida vel, arcu. Check it out hizzle that's the shizzle. We gonna chung erizzle. Fo izzle dolor fo turpis tempizzle tempor. Gangsta boom shackalack mofo et turpizzle. Sizzle izzle tortor. Pellentesque uhuh ... yih!</p>
    <p>Tendrils of gossamer clouds! Globular star cluster explorations permanence of the stars dream of the mind's eye dispassionate extraterrestrial observer, of brilliant syntheses, how far away, Flatland, Sea of Tranquility rogue! Stirred by starlight how far away! Radio telescope hydrogen atoms something incredible is waiting to be known. Science? Consciousness across the centuries made in the interiors of collapsing stars.</p>
    <p>As a patch of light, Orion's sword quasar cosmic ocean. Kindling the energy hidden in matter muse about, stirred by starlight and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
    <div id="profPic">
      <img class="profPics" src="/images/profile.jpg" alt="Profile Picture">
    </div>
  </div>
</div>
<br>
<div class="row">

还有 css...

#profPic {
  width: 25%;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

#profPic img {
  max-width: 100%;
  border-radius: 50%;
  filter: grayscale(30%);
}

【问题讨论】：

预期的输出是什么？你能附上一张图片吗？

标签： html css image paragraph

【解决方案1】：

这是因为图片在文字下方。右侧浮动图像之后的文本将在图像周围流动。继续它的文本已经布局，不受后续内容的影响。

将图像向上移动到文本上方以查看所需的布局。

【讨论】：

就是这样。我现在觉得自己很傻。这是漫长的一周：p
我之所以知道，是因为我记得卡在同一件事上。虽然不是公认的答案？
我试图给你的答案加一，但我没有足够的分数。不过，我没有看到任何将其设置为接受答案的选项。如果有办法让我知道。这是我在这里的第一篇文章。
您应该能够“接受”自己问题的答案，这与投票赞成答案不同/

【解决方案2】：

您的图片在包装 div 中，但文本不在。尝试使用两个 COL，如下所示。

<div class="row">
    <div class="col-sm-8" id="aboutCol">
       <p>Class is dead,” says Foucault; however, according to Reicher, it is not so much class that is dead, but rather the absurdity, and some would say the paradigm, of class. However, the subject is interpolated into a postpatriarchialist dialectic theory that includes consciousness as a totality." Lorizzle ipsum bling bling sit amizzle, consectetuer adipiscing elit. Nizzle sapien velizzle, bling bling volutpat, suscipit , gravida vel, arcu. Check it out hizzle that's the shizzle. We gonna chung erizzle. Fo izzle dolor fo turpis tempizzle tempor. Gangsta boom shackalack mofo et turpizzle. Sizzle izzle tortor. Pellentesque uhuh ... yih!</p>
       <p>Tendrils of gossamer clouds! Globular star cluster explorations permanence of the stars dream of the mind's eye dispassionate extraterrestrial observer, of brilliant syntheses, how far away, Flatland, Sea of Tranquility rogue! Stirred by starlight how far away! Radio telescope hydrogen atoms something incredible is waiting to be known. Science? Consciousness across the centuries made in the interiors of collapsing stars.</p>
       <p>As a patch of light, Orion's sword quasar cosmic ocean. Kindling the energy hidden in matter muse about, stirred by starlight and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
    </div>
    <div class ="col-sm-4" id="profPic">
      <img class="profPics" src="/images/profile.jpg" alt="Profile Picture">
    </div>
  </div>

【讨论】：