ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS レイアウト フローティング (2)

CSS レイアウト フローティング (2)

黄舟
黄舟オリジナル
2016-12-17 11:50:161261ブラウズ

前回の記事では、左側(右側)が固定幅の2カラムフローティング、右側(左側)が自動スケーリングについて書きましたが、今回は3カラムフローティングの問題についてお話します。前述したように、2 列フローティングは他の複数列フローティングの基礎となります。2 列フローティングの原理を理解すると、3 列以上の複数列フローティングが簡単になります。

中央の左側は幅が固定されており、右側は適応型です:

左側と中央の辺は幅が固定されているため、右側のみが適応型の幅を持っているため、この 3 列の float は同じです2 列フロートの左側と同様です。同じ原則が固定幅の適応右側にも適用されます。HTML 構造コードは次のとおりです:



< ;head>
CSS float


私は左側です

私は真ん中です

私は右側です



2 つのフローティング列の CSS スタイル コードを少し変更するだけです:

# a {フロート:左; 幅:200ピクセル; 背景:#aaa;}
#b{フロート:左; background:#f00;}
#c{background:#777; margin-left:400px;}

もちろん、ここで覚えておくべきことの 1 つは、 b オブジェクトには left float を与える必要があるということです。

左側はアダプティブ、中央の右側は固定幅です:

左側と同じで、中央は固定幅、右側はアダプティブです。 3 つのオブジェクト a、b、c は HTML 構造コードの順序で置き換える必要があり、フローティングはフローティング解除の前にあるため、ブラウザの解釈順序は c-b-a である必要があります:



私は真ん中です

私は右側です

CSSコードは次のとおりです:

#a{background:#aaa;}
#b{float:right width; :200ピクセル; 背景:#f00;}
#c{float:right; width:200px; 背景:#777;}

左側と右側の幅は固定、中央は適応型:

このレイアウトが最もよく使用されます。両側のサイドバーの幅が固定され、中央のコンテンツ領域が適応型になるため、これは多くの Web サイトで一般的なレイアウト方法です。多くの人はここで 4 つの DIV を使用してレイアウトを完成します。つまり、


私は左側です


私は真ん中です

私は右側です


ネストされた DIV を使用して 3 列フローティングを完成させ、フローティング レイアウトを実際に実行できるようにします。目的は完了しますが、このネストがなくても 3 列フローティングの目的は達成できます。ネストを 1 つ省略できるので、1 つ省略してみてはいかがでしょうか。目標を達成するには、b と c の順序を変更するだけです:


私は左側です

私は右側です

私は真ん中です

CSSコードは次のとおりです:

#a{float:left:background:#aaa;}
#b{ マージン左:200px; margin-right:200px; 背景:#f00;}
#c{float:right; 背景:#777;}

このようにして、2カラムフローティングレイアウトをベースに、3カラムフローティングレイアウトも完成します。

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


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。