[CSS]テキストを画像の下に回り込ませないようにするスタイルシート

ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。

Float an image without text wrapping under it.
demo

HTMLは、img要素とp要素をdiv要素で包んでいるだけです。

HTML

<div class="content">
    <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....
</div>

CSSは、floatを使用せず実装しています。

CSS

.content {
	padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
	position: relative; /* So the thumbnail is relative to this */
}

	.content img {
		left: 0;
		position: absolute;
		top: 0;
	}

実装のイメージは下記のようになります。

黄色の箇所はdiv要素に設定したpaddingで、そこに画像を配置しています。