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

小粋空間 » CSS » 画像を下揃えにしてテキストを回り込ませる方法

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

（クリックで拡大）

サンプル

１．問題点

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

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

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

画像を下揃えにしてテキストを回り込ませるには、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の高さ分だけ画像を下にずらしています。

« 前の記事へ

次の記事へ »