i-CSS2からはfloatがdivやpにも使用可能です。
……ん？divにfloat？divの回り込み？
そうです。divを横並びにできるのです。パソコンやSoftBankは以前から可能でしたが、いわゆる2カラム3カラム(携帯画面では3カラムはキツいかも…)のレイアウトがtable(そもそも表を組むためのタグであってデザインレイアウト用ではない。)は一切不要になります。
このブログもパソコン表示はコレを使っています。(携帯表示は今現在、auと大半のdocomoが未対応なため別表示になっています。)
■float
値：left、none(デフォルト)、right、inherit
■clear
値：both、left、none(デフォルト)、right、inherit
例)
<div style="width:50%;float:left;">
<div style="background-color:#f00;color:#fff;padding:5px;">
左ボックス内容
</div>
</div>
※auとi-modeブラウザ1.0は赤と青とグレーのボックスが全て縦に並んでいます。
<div style="background-color:#f00;color:#fff;padding:5px;">
左ボックス内容
</div>
</div>
※auとi-modeブラウザ1.0は赤と青とグレーのボックスが全て縦に並んでいます。
<div style="width:50%;float:right;">
<div style="background-color:#00f;color:#fff;padding:5px;">
右ボックス内容
</div>
</div>
※divを重ねているのはfloatを使う際、通常親要素には幅(width)とfloatのみ指定して詳細は子要素にて指定します。
width、paddingプロパティに関しては別記します。
<div style="background-color:#00f;color:#fff;padding:5px;">
右ボックス内容
</div>
</div>
※divを重ねているのはfloatを使う際、通常親要素には幅(width)とfloatのみ指定して詳細は子要素にて指定します。
width、paddingプロパティに関しては別記します。
<div style="clear:both;background-color:#808080;color:#fff;">
回り込み解除のボックス内容
</div>
回り込み解除のボックス内容
</div>
