ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS と Div を使用して不規則な画像の周囲にテキストを回り込むにはどうすればよいですか?
CSS と Div を使用して不規則な画像の周囲にテキストを回り込むにはどうすればよいですか?
- Linda Hamiltonオリジナル
- 2024-12-20 10:03:111003ブラウズ
非長方形画像の周りにテキストを折り返す方法?
不規則な境界線の周りを折り返すようにテキスト フローをカスタマイズすると、Web サイトまたはアプリケーションの視覚的な魅力を高めることができます。この記事では、Tory Lawson が 2011 年のブログ投稿「非長方形の図形の周囲にテキストを折り返す」で提案した方法について説明します。
ステップ 1: 回り込み領域を定義する
画像編集プログラムを使用して、テキストの終了位置を表す境界線を引いて、目的のテキスト境界を決定します。
ステップ 2: List
ラップ領域の幅を一定の間隔 (例: 10 ピクセルごと) で測定します。スペーサー div の幅として機能するこれらの値を記録します。
ステップ 3: マークアップとマークアップを実装するCSS
マークアップ:
<body> <div>
CSS:
#wrapper {
width:634px;
height:428px;
display:block;
background-image:url("headshot.jpg");
}
.spacer{
display:block;
float:right;
clear:right;
}
p {
display:inline;
color:#FFF;
}
この手法は、div を浮動にしてシェイプのブロックをブロックします。領域からの一定の距離を維持しながら、テキストを非長方形の画像の周囲に巻き付けることができます。
結論
非長方形の画像の周囲にテキストを折り返すには、カスタムのアプローチが必要です。直接的な CSS ソリューションはありませんが、この記事で説明されている方法を使用すると、目的の効果を効果的に達成できます。
以上がCSS と Div を使用して不規則な画像の周囲にテキストを回り込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。