画像の右に文字を入れる方法
通常画像を入れると文章は画像の下の行から続きますが、回り込ませる事もタグを工夫すれば可能です。どれもフロートが終わったら、フロートをクリアするという基本は一緒です。
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での設定に手間がかかるぐらいでしょう。
広告
関連コンテンツ