段落不会环绕图像

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>

段落不会环绕图像

Paragraph's won't wrap around image

html

css

image

paragraph