floatスタイル(ブロック要素の配置)

backb02.jpg (2450 バイト)画像を挿入しました。この画像には<float:right>が設定されています。
ご覧の通り,画像に続くテキストは左側に回りこんで表示されました。

 

表1  
floatスタイルは right

表を挿入しました。
この表には<float:right>が設定されています。ご覧の通り,表に続くテキストは左側に回りこんで表示されました。 表の高さをはみ出したテキストは下に回りこみます。

backf07.gif (5169 バイト)画像を挿入しました。この画像には<float:left>が設定されています。
ご覧の通り,画像に続くテキストは右側に回りこんで表示されました。

 

表2  
floatスタイルは left

表を挿入しました。
この表には<float:right>が設定されています。ご覧の通り,表に続くテキストは左側に回りこんで表示されました。 表の高さをはみ出したテキストは下に回りこみます。

backh04a.gif (7445 バイト)この画像には<float:feft>を設定。その結果,画像と表を並べて配置できる。

表3  
   

 

表4  
floatスタイルは left

backf03.gif (4347 バイト)このように表と画像とテキストを並べて配置できる。

表には<float:left>
画像にも<float:left>を設定

htmlsouse.gif (2461 バイト)

<style TYPE="text/css">
<!--
    IMG.a {float:right}
    IMG.b {float:left}
    IMG.c {float:left}
    TABLE.d {float:right}
    TABLE.e {float:left}
    TABLE.f {float:left}
    IMG.g {float:left}
-->
</style>

END(99/9/9)