February 06, 2005

test003:divタグのテスト

左に表示
右に表示
1行、改行されました
最後の行
回り込みをクリアして、下に表示


・上記の内容
1.バックグラウンドに画像を配置し、画像サイズ分の大きさの領域を width, height で用意し、位置を float で left にしています。
<div style="width:64px; height:58px; background-image: url(http://blog01.linkclub.jp/media/484/20050123-teikoku.jpg); float:left; ">左に表示
</div>
2.特に位置を float で指定しなければ、前の設定から勝手に回り込みます。
<div style="background-color:#FFCCFF; ">右に表示(<br>は入れず、ただ本文で改行しただけです)
1行、改行されました
最後の行
</div>
3.回り込みを解除する為 clear:left; としました。
<div style="background-color:#CCFFFF; clear:left;">回り込みをクリアして、下に表示</div>


改行に関しては、<br>タグは必要なく、本文の入力欄で改行するだけで良い様です。
div タグを上手く使えば、他の blog で時々見掛ける様に、カテゴリ毎に画像を用意して、先頭に貼付ける事が可能な事が分かりました。
後は padding や margin の設定をすればより見やすくなりそうです。


Posted by 3k1 at 02:47 P | from category: test | TrackBacks
Comments
No comments yet
:

:

Trackbacks