サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
回り込みを指定
- 回り込みさせるには、float プロパティを指定します。
- [使い方]
- .sample{width: 50%; height:7 0px;float: right;}
プロパティ名 | 値 | 説明 |
---|---|---|
float: | left ; | ボックスを左に配置・テキストなどを右側に回り込ませます。 |
right; | ボックスを右に配置・テキストなどを左側に回り込ませます。 | |
none ; | 回り込みません。(初期値) |
回り込みを解除
- 回り込みを解除させるには、clearプロパティを指定します。
- [使い方]
- <sample style="clear: right;">
プロパティ名 | 値 | 説明 |
---|---|---|
clear: | left; | ボックスの右側にある回り込みを解除します。 |
right; | ボックスの左側にある回り込みを解除します。 | |
both; | どちらの回り込みも解除します。 | |
none; | 解除しません。(初期値) |
サンプル
[headの中]
<style type="text/css"><!--
box{
width: 200px;
float: left;
}
.sample1{
width: 200px;
height:70px;
background-color: #ccff99;
float: right;
margin-right: 100px;
}
.sample2{
width: 200px;
height: 70px;
background-color: #ccff99;
float: left;
}
-->
</style>
[bodyの中]
<div class="box"><div class="sample1">右側ボックス</div>
ボックスの左側に
文字を表示します。
<p style="clear :left;">回り込みを解除します。</p>
<div class="sample2">左側ボックス</div>
ボックスの右側に
文字を表示します。
<p style="clear : right;">回り込みを解除します。</p>
</div>
[ブラウザ上]
右側ボックス
ボックスの左側に
文字を表示します。
回り込みを解除します。
左側ボックス
ボックスの右側に
文字を表示します。
回り込みを解除します。