画像の右に文字を入れる方法

通常画像を入れると文章は画像の下の行から続きますが、回り込ませる事もタグを工夫すれば可能です。どれもフロートが終わったら、フロートをクリアするという基本は一緒です。

HTMLで設定する場合

<p><img src="gazou.jpg" align="left"/>写真右文章
<br clear="left" />写真下文章</p>

align=”left”で左にフロートしています。
br clearタグで左へのフロートを解除しています。

CSSで設定する場合

CSSの方が推奨されています。
・    CSSのコードの例

img.flt_left { float: left; }
.clr_left { clear: left; }

左へのfloatと、それが終わった後clearするためのプロパティ設定をしています。
・    HTMLのコードの例

<p>
<img src="gazou.jpg" class="flt_left" />写真右文章
<div class="clr_left">写真下文章</div>
</p>

やっている事はほとんどHTMLの場合と変わりはないです。CSSでの設定に手間がかかるぐらいでしょう。

広告

関連コンテンツ