CSS レイアウトでよく使用されるメソッド: float:none|left|right
価値：
none:?デフォルト値。物体が浮かない
左: テキストはオブジェクトの右側に流れます
右: テキストはオブジェクトの左側に流れます
仕組みについては、1 行 2 列の例を参照してください。
xhtmlコード:
| 引用した内容は以下の通りです。 <div id="ラップ"> <div id="column1">これは最初の列です</div> <div id="column2">これは 2 番目の列です</div> <div class="clear"></div> /*これは Web 標準の意図に反しています。単に、その下の要素をクリアする必要があることを意味します*/ </div> |
CSSコード:
| 引用した内容は以下の通りです。 #wrap{幅:100;高さ:自動;} #column1{浮動:左;幅:40;} #column2{float:right;width:60;} .clear{clear:both;} |
位置:静的|絶対|固定|相対
価値：
static:?デフォルト値。特別な配置はありません。オブジェクトは HTML の配置ルールに従います。
絶対:? オブジェクトをドキュメント フローの外にドラッグし、左、右、上、下、およびその他の属性を使用して、最も近い親オブジェクトを基準にして、最も多くの位置設定を行って絶対位置を設定します。そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます。
修正済み:?サポートされていません。オブジェクトの位置決めは絶対方式に従います。ただし、従うべきルールがいくつかあります
相対:?オブジェクトは積み重ねることはできませんが、左、右、上、下、その他の属性に基づいて通常のドキュメント フロー内でオフセットされます。
1行2列の例を実装します。
xhtmlコード:
| 引用した内容は以下の通りです。 <div id="ラップ"> <div id="column1">これは最初の列です</div> <div id="column2">これは 2 番目の列です</div> </div> |