{float-位置;}でボックスの横にボックスや文字を並べることができます。 両者の間隔はmarginの属性を指定することで空けることができます。

■ ボックスの表示位置を指定する

ボックスを表示できる位置は以下の通りです。

【ブラウザ表示】

<div class="box20">ボックスが左に配置されました。</div>
<div class="box21">二つ目のボックスが右に並びました。</div>
<div class="cr1">ここで回り込みが解除されました。</div>

div.box20{
border:1px solid;
float:left;
width:200px;
height:200px;
}
div.box21{
border:1px solid;
width:200px;
height:200px;
}
div.cr1{clear:both;}

<div style="border:1px solid; float:left; width:200px; height:200px;">
ボックスが左に配置されました。
</div>
<div style="border:1px solid; width:200px; height:200px;">
二つ目のボックスが右に並びました。
</div>
<div style="clear:both;">ここで回り込みが解除されました。 </div>

■ その他の項目

スタイルシート一覧のページに戻る