サイト内検索

...スタイルシート(css)...

スタイルシート・画像

画像に並ぶ文字の横方向(左右)の位置

画像に並ぶ文字の横方向(左右)を指定するには、floatプロパティを指定します。
floatプロパティを使って反対側にテキストを回り込ませることができます。
[使い方]
.sample{float: left;}
[横方向(左右)]
プロパティ名 説明
float:left;画像は左側に、テキストを右側に回り込ませます。
right;画像は右側に、テキストを左側に回り込ませます。
none;回り込みません。

回り込みの解除

回り込みを終了させるには、clearプロパティを指定します。
[使い方]
.sample{clear: both;}
プロパティ名 説明
clear:left;画像の右側にある回り込みを解除します。
right;画像の左側にある回り込みを解除します。
both;どちらの回り込みも解除します。
none;回り込みを解除しません。

サンプル

[headの中]

<style type="text/css">
<!--
.sample1{float: left;}
.sample2{float: right;}
.sample3{clear: both;}
-->
</style>

[bodyの中]

<img src="img/sample.JPG" width="110" height="70" class="sample1">

右側に
文字を
表示しています。


<p class="sample3">回り込みを解除</p>

<img src="img/sample.JPG" width="110" height="70" class="sample2">

左側に
文字を
表示しています。

[ブラウザ上]

サンプル

右側に
文字を
表示しています。

回り込みを解除

サンプル


左側に
文字を
表示しています。

Copyright c 2007.10.01 luc All rights reserved.