段落不会包裹图像

Question

这通常是一项简单的任务，但我失去了一个多小时，似乎没有任何答案可行。

我只想在图像周围包裹一些段落。我已经尝试了我能想到的每一种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%);
}

Answer 1

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

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

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