floatした画像にテキストが回り込まないようにする方法


画像が回り込まないようにする
画像にfloatを指定してテキストを回り込ませると、自動で画像の周りに回りこみとても便利なのですが、画像の下には回りこませたくない時があります。

tableタグやcss3でtable-cellを使う方法もありますが、tableは使いたくないし、table-cellはmarginが効かなかったり使い勝手が良くなかったので、floatで行う方法を紹介します。

スポンサーリンク

画像にテキストが回り込まないようにする

画像の横に配置したいテキストをPタグなどで囲み、囲ったタグに「overflow:hidden;」を設定する。

HTML

<div class="box">
	<img src="img.jpg" />
	<p>
		テキストテキストテキストテキストテキストテキストテキスト
	</p>
</div>

CSS

	.box img {
		float:left;
	}

	.box p{
		overflow:hidden;
	}

これでテキストが画像に回り込まないようになり、画像の横にキッチリテキストが表示されるようになる。
テキストが回りこまない

スポンサーリンク

おわりに

基本テキストは回りこんでもらって構わないのですが、左右をキッチリ分けたいシーンが有ったので紹介しました。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク