テキストの画像への回り込み
テキストを画像の横に回り込ませたい場合があります。何通りか方法がありますが、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">で囲むと、以下のような表示になります。
MT3.2のスタイルシートとテンプレートは、カラムのレイアウトが"alpha"というカラムで開始し、beta、gamma(３カラム目)という名前の順番に並ぶように設計されています。