CSS レイアウトフローティング (1)-CSSチュートリアル-php.cn

CSS のフローティングは常に憂鬱な問題であり、特にフローティング列が多い場合に多くのレイアウトの問題が発生します。 2 列構造の左右のフローティングは最も基本的なフローティングであり、3 列、4 列などのフローティングの基本でもあるため、もうパニックになることはありません。これに基づいて。

一般的な CSS 2 列フロートをいくつか見てみましょう。CSS コードは次のカテゴリにあります。 HTML 構造コードは次のとおりです。

< ;head>
CSS float

最初は左側、その後はおそらく右側に移動します< div>

最初は右側でしたが、後で左側に行くかもしれません

左側は固定幅で、右側は適応型です:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}

左側の幅を固定して自動にする必要がある場合右側の幅を指定するには、a オブジェクトを「左側にフローティング」に設定するだけです。 b オブジェクトはデフォルトで画面の幅全体を占めますが、a は左側にフロートして 200PX の幅を占めるため、b は自動的に配置されます。 aの後ろにあります。

もちろん問題はあります。つまり、左側のコンテンツが右側よりも高い場合、右側の高さはそれに応じて増加せず、右側のコンテンツが左側よりも高い場合、コンテンツは増加しません。右側のコンテンツは左側のコンテンツの下部にストリーミングされます。

この問題を解決する 1 つの方法は、b に float を設定することです。もちろん、これは、右側のコンテンツが 1 の幅より小さい場合に、右側の float を設定することを意味しません。行の左側と右側の中央に空白が表示されます:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}

b を left float にすると、真ん中の空白の問題は解決できますが、同様に b オブジェクトの内容が 1 行に足りない場合、空白ができてしまいます。右側に表示されます:

#a {float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}

もちろん、両端を持つ別の解決策もあります。つまり、b オブジェクトの位置を左から設定することで、フローティングの目的を達成し、b のコンテンツが多すぎる問題を解決できます。オブジェクトの下に流れるオブジェクト：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

右側が固定幅、左側が自動:

左側が固定幅、右側が自動と同じように、右側が固定幅、左側が自動も実現できます。

#a{背景: #f00; マージン-左: 200 ピクセル;}
#b{フロート: 右: 200 ピクセル; background:#aaa;}

上記のコードに従うと、このコードでは b オブジェクトが a オブジェクトの下に表示され、右側、固定幅、および固定幅として表示されないことがわかります。期待どおりに自動的に残ります。 HTML 構造のため、浮動 DIV は非浮動 DIV の前に表示される必要があります。つまり、上記のコードに従った場合、

と

の順序は逆にする必要があります:

私ここは右側にあります、後で左側に走っても構いません

私は左側から始めて、次に右側に移動するかもしれません

もちろん、HTML 構造を変更せずに CSS スタイルを使用してフローティング順序を調整することもできます。これは利点でもあります。 1 つは、元の HTML 構造を変更せずにページの変更を完了できることです:

#a{float:left; width:200px;}

#b{background:#f00 ; margin-left:200px;}

上記は CSS レイアウトのフローティングコンテンツです。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。