Floating Div を使用して不規則な形の画像の周囲にテキストを回り込ませるにはどうすればよいですか?

不規則な形の画像の周りにテキストを折り返す方法

画像の周りにテキストを折り返すのは一般的なレイアウト手法ですが、画像がそうでない場合はどうすればよいですか?単純な長方形？まだエレガントなラッピング効果を作成できますか?

この記事では、Tory Lawson が提案した方法を検討します。この方法では、フローティング div で図形の領域をブロックすることで、不規則な形の画像の周囲にテキストを折り返すことができます。

ステップ 1: ラップ領域を定義する

画像を上下反転して、クリアランスのための小さなパディングを考慮して、テキストを終了したい位置に境界線を描きます。グリッド システムを使用して、画像の境界線から一定の距離を確保します。

ステップ 2: 測定リストを作成する

輪郭の幅を 10 ピクセルごとに測定し、書き込みます紙上の x 座標を下に移動します。これにより、ブロック div の間隔が決まります。

ステップ 3: マークアップと CSS を作成する

画像とブロック div を含むラッパー div を定義します。ラッパー内でスペーサー div を作成し、手順 2 で収集した測定値に従ってその幅を設定します。

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}

.spacer {
  display: block;
  float: right;
  clear: right;
}

p {
  display: inline;
  color: #FFF;
}

これらの手順に従うことで、不規則なテキストを効果的に折り返すことができます。イメージを形作り、デザインにユニークで洗練された外観を与えます。 CSS には単純な「テキストの回り込み」オプションはないかもしれませんが、この回避策は信頼性が高く、見た目も美しいソリューションを提供します。