【CSS】floatさせた画像の下にテキストを回り込ませない記述方法

CSSの基本ですが、画像をテキストの左右に配置する時は下記のように記述します。

<div class="box">
<img src="test.png">
<p>回り込みさせるテキストです</p>
</div>
.box img {
	float: left;
}

この場合、テキストが画像よりも長くなると下に回りこみますが、回り込ませないで端を揃えたままにするTipsを紹介。

画像の下にテキストを回り込ませない方法

画像の下にテキストを回りこませたくない場合は、下記を追加します。

.box p {
	overflow: hidden;
}

私はこのテクニックを知らなかった頃、画像の下にpaddingを取ってごまかしてた記憶があります。今思うと相当恥ずかしい…(汗)

overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

LINK:overflow~スタイルシートリファレンス

これを応用して、定義リスト<dl>の<dt>にfloatを記述して横並びにした際、<dd>に[overflow:hidden]を入れると<dd>のテキストが<dt>の下に回り込まなくなります。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント