10月 132011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<img class=”imgrtext” src=”testthm.jpg” alt=”木々”/><p>画像の右側に文章が来るようにしてみました。<br/>
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
</p>
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
</p>
CSSソース
.imgrtext {
float:left;
}
float:left;
}
サンプル表示
画像の右側に文章が来るようにしてみました。
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
解説
HTMLソース
右側に文章を回り込ませて表示させたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class=”imgrtext”/>としています。
CSSソース
float:left;
float:left;には左から右へと順番に並べて表示するという意味があります。
なので、画像(img)の右側にテキスト(p)が横並びに表示されます。