小粋空間  -  a cheap joke and a play on words site

画像を下揃えにしてテキストを回り込ませる方法

画像を下揃えにしてテキストを回り込ませる方法を紹介します。

（クリックで拡大）

サンプル

１．問題点

画像にテキストを回り込ませる方法はありますが、回り込ませたテキストの一番下の行に画像を揃える方法が分かりません。

ということで、画像を下揃えにしてテキストを回り込ませる方法を紹介します。

２．画像を下揃えにしてテキストを回り込ませる

画像を下揃えにしてテキストを回り込ませるには、HTMLとCSSを次のように設定します。

HTML

<div id="box">
  <div class="fix"></div>
  <div class="img"><img src="[画像のURL]" width="[画像の幅]" />/div>
～（テキスト）～
</div>

CSS

#box {
  width: 600px;
}
#box .fix {
  float: right;
  height: 12em; /* 画像上部の余白 */
}
#box .img {
  float: right;
  clear: both;
  margin: 10px 0 0 10px;
}

要するに、class属性fixの高さ分だけ画像を下にずらしています。