ブートストラップとイメージラップ

Question

私はこれにはコードはありませんが、インターネットを検索しましたが、私がやりたいことはできないと感じています。 矩形ではない画像の周りにテキストを折り返して欲しいと思います。 このようなものは、JS JSWrapまたはStackflowのこの解決策は反応性の高いWebサイトでは機能していないようです。 誰も私のための解決策を持っていますか？おかげさまで

Answer 1

この結果は、CSS shape-outsideプロパティを使用して取得できます。このプロパティは浮動要素に作用し、トランジションでアニメーション化することができます。画像に使用できるurl（）値があります。この例のように背景画像を設定することもできます。

プロパティhereについて詳しく知ることができます。

希望すると助かります！

body { 
 
    margin: 15px; 
 
} 
 

 
.top-shape { 
 
    shape-outside: circle(50% at 10px 10px); 
 
    float: left; 
 
    clip-path: circle(50% at 0 0); 
 
    width: 300px; 
 
    height: 300px; 
 
    background: url(https://journalismfrommars.files.wordpress.com/2015/01/mars-no-background.png?w=2880&h=1800) 50% 50% no-repeat; 
 
} 
 

 
.p1 { 
 
    text-align: justify; 
 
}

<div class="main"> 
 
<div class="top-shape"></div> 
 
<div class="btm-shape"></div> 
 
<p class="p1">Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions vanquish the impossible, preserve and cherish that pale blue dot colonies? Inconspicuous motes of rock and gas billions upon billions the carbon in our apple pies. Intelligent beings, emerged into consciousness billions upon billions at the edge of forever vanquish the impossible kindling the energy hidden in matter light years dream of the mind's eye vanquish the impossible rich in heavy atoms! Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions 
 
</p> 
 
</div>