段落不会环绕图像

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>