[新着] Webテンプレートを仮オープンしました
float は、回り込みを指定するプロパティです。
画像を左か右に寄せて、逆側にテキストを回り込ませることができます。
#example {
float: left;
}
| float | left … （画像を左に配置・テキストを右側に回り込ませます） |
|---|---|
| right … （画像を右に配置・テキストを左側に回り込ませます） | |
| none … （指定なし）デフォルト |
回り込みを終了させるための clear プロパティもご覧ください。
【IEの不具合】
※背景色（または背景画像）が指定された要素内で回り込みの指定を行うと、回り込ませたテキストの一部が消えたり、背景色の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対してサイズの指定（width）を行っておくと、この不具合を回避することができます。）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example { width: 100%; }
#example1 { float: left; }
#example2 { float: right; }
-->
</style>
</head>
<body>
<div id="example">
<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example1">
<p>
画像の右側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: left;">--- 回り込みを解除 ---</p>
<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example2">
<p>
画像の左側に<br>
複数行のテキストを<br>
表示してみます
</p>
<p style="clear: right;">--- 回り込みを解除 ---</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
画像の右側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
画像の左側に
複数行のテキストを
表示してみます
--- 回り込みを解除 ---
