HTML と CSS を使用して画像の周囲にテキストを回り込むにはどうすればよいですか?

HTML/CSS で画像の周囲にテキストを折り返す

画像の周囲にテキストを折り返すという課題は、Web デザインにおいてよくある課題です。目的の効果を作成するには、以下の手順に従います。

HTML 構造:

1. ID を使用してコンテナ div 内の画像と周囲のテキストをラップします。属性 (#container.

CSS など)スタイリング:

1. 折り返されたテキストの幅を決定するために、コンテナ div の特定の幅を定義します。
2. イメージを含む #floated div に float: left を割り当てます。これにより、画像が左にフローティングされ、その周りにテキストが流れるようになります。
3. #floated div に特定の幅を設定して、画像の幅を制御します。
4. 周囲に十分なスペースを確保します#floated div 内のパディングまたはマージン設定による画像。

例コード:

<div>
<pre class="brush:php;toolbar:false">#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

追加リソース:

• [JSFiddle デモ](http://jsfiddle.net/kYDgL/) )
• [MDN ウェブ ドキュメント: Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
• [W3 Schools: テキストの折り返し](https://www.w3schools.com/css /css_text-wrap.asp)