画像に回り込んで文章表示(右側に文章)

灰色背景がサンプルソース


サンプルソース

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)が横並びに表示されます。