10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<img class=”imgrtext” src=”testthm.jpg” alt=”木々”/><p>画像の右側に文章が来るようにしてみました。<br/>
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
</p>

CSSソース

.imgrtext {
float:left;
}

サンプル表示

木々

画像の右側に文章が来るようにしてみました。
画像と文章を並べて表示したい時に使ってみると良いかもしれません。

解説

HTMLソース

右側に文章を回り込ませて表示させたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class=”imgrtext”/>としています。

CSSソース

float:left;
float:left;には左から右へと順番に並べて表示するという意味があります。
なので、画像(img)の右側にテキスト(p)が横並びに表示されます。

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>