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

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

デモのキャプチャ

Float an image without text wrapping under it.
demo

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

HTML

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

CSS

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

実装のイメージ

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

sponsors

top of page

©2018 coliss