6 つの古典的な CSS 3 列レイアウトソリューション-CSSチュートリアル-php.cn

6 つの古典的な CSS 3 列レイアウトソリューション

小云云

リリース： 2017-12-04 13:32:58

オリジナル

10257 人が閲覧しました

CSS はフロントエンド開発プログラマーにとって不可欠な言語です。CSS を使いこなすことができれば、フロントエンド開発の作業が大幅に改善されます。この記事では、主に古典的な CSS の 3 列レイアウトスキームを紹介し、それを皆さんと共有します。

3 列レイアウトは、名前が示すように、両側が固定され、中央が適応します。 3 列レイアウトは開発において非常に一般的です

1. float レイアウト

最も単純な 3 列レイアウトは、レイアウトに float を使用することです。まず、左右の列を描画します:

ログイン後にコピー

この時点で、左右の列の分布を取得できます:

次に、中央の列の処理方法を見てみましょう。 float 要素の場合、ドキュメントフローから切り離され、他のボックスはこの要素を無視することがわかっています。 (ただし、他のボックス内のテキストはこの要素用のスペースを確保し、それを囲みます。) したがって、現時点では、コンテナーコンテナーに通常の p を追加するだけで済みます。これにより、左右が無視され、コンテナー全体が埋められます。さらに、マージンが左右にあり、スペースが流出します:

ログイン後にコピー

この時点で見られる効果は次のとおりです: 左右の列が 2 行目に押し込まれています。これは main の width が 100% であるためです。次に、左と右の列のマージンを調整して、左、中央、右を 1 行に配置します。

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

ログイン後にコピー

2 番目のステップは、左のマージン左を -100% に設定することです。今度は、左の列が最初の行の先頭に移動します。次に、右の margin-left を負の幅の値 -100px に設定すると、右の列も左と中央の列と同じ行に移動されます:

しかし、まだ完了していません。メインにテキストを追加してみます:

fjlskdjflkasjdfljasdljlsjdljsdjflksadj

ログイン後にコピー

テキストが抑制されていることがわかります。次にこの問題を解決する必要があります。

3 番目のステップは、コンテナにパディングを与えることです。これは、左右の列の幅と正確に同じである必要があります:

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

ログイン後にコピー

この時点で表示される結果は、左、中央、右の列です。全体的に列はすべて縮小されましたが、テキストはまだ抑制されています。

4 番目のステップは、左右の列に相対レイアウトを追加し、左右の値を設定してそれらを外側に移動することです:

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

ログイン後にコピー

以上で完了です: