段落は画像を囲んでいません

Question

これは通常は単純な作業ですが、1時間以上失われてしまい、答えが得られないようです。

画像の周りにいくつかの段落を囲みたいだけです。私は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内にありますが、テキストはありません。次のように2つの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>