« 3カラムレイアウト | メイン | バナーへの画像表示 »

テキストの画像への回り込み

テキストを画像の横に回り込ませたい場合があります。何通りか方法がありますが、CSSを使って実現してみましょう。

CSSクラスをスタイルシートに追加します。

.imgfloatleft {
  float:left;
  margin-top:10px;
  margin-right:10px;
  margin-bottom:10px;
} 

エントリー入力ではimgタグにclass属性を付けます。
<img src="http://foo.com/image.jpg" class="imgfloatleft">

イメージの下にテキストが入る余地が無い場合を考えて、ラップさせるテキストの最後に<br style="clear: both;"/>を入れます。
これで、いけるハズなのですが、うまくいきません。

結局、スタイルシートは以下のようにしました。

.imgRight img
{
   float:right;
   margin-top:10px;
   margin-right:10px;
   margin-bottom:10px;
} 

画像とテキストを<span class="imageRight">で囲むと、以下のような表示になります。

3col-small.jpgMT3.2のスタイルシートとテンプレートは、カラムのレイアウトが"alpha"というカラムで開始し、beta、gamma(3カラム目)という名前の順番に並ぶように設計されています。

トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/8

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)