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

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

小云云

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

オリジナル

10416 人が閲覧しました

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

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

1. float レイアウト

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

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

ログイン後にコピー

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

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

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left"></p>
      <p class="right"></p>
      <p class="main"></p>
      </p>

ログイン後にコピー

長所: シンプル

短所: 中央部分が最後にロードされるため、コンテンツが多い場合はエクスペリエンスに影響します

2. BFC ルール

BFC (ブロックフォーマットコンテキスト) ルールでは、BFC が浮動要素と重複しないことが規定されています。したがって、メイン要素を BFC 要素として設定すると:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

ログイン後にコピー

3. 聖杯レイアウト

聖杯レイアウトの核心は、左、中央、右の列がすべて float によってフローティングされることです。次に、負の値のマージンを調整してください。

最初のステップは、基本的なレイアウトを確認することです

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

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

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <p class="container">
            <p class="main"></p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

ログイン後にコピー

この時点で見られる効果は次のとおりです: 左右の列が 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 に設定すると、右の列も左と中央の列と同じ行に移動されます:

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

    <body>
        <p class="container">
            <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

ログイン後にコピー

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

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;
        }

ログイン後にコピー

以上で完了です:

4. 二重飛行翼レイアウト

二重飛行翼レイアウトの最初の 2 つのステップは、中央の列のコンテンツがブロックされる問題の解決策が異なることを除いて、聖杯レイアウトと同じです。 :

メイン部分のコンテンツがブロックされるため、メイン内に別のコンテンツを追加し、オクルージョンを避けるためにそのマージンを設定すると、問題は解決できます:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: &#39;&#39;;
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <p class="main">
        <p class="content"></p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

ログイン後にコピー

注意すべき唯一のことは、 float をクリアするには main の後に要素を追加する必要があります。

5. Flex レイアウト

Flex レイアウトを使用して 3 列レイアウトを実装することも非常に簡単ですが、ブラウザの互換性に注意する必要があります:

注意すべき点がいくつかあります:

6. 絶対位置決め

絶対位置決め方法も比較的簡単です。本体を最初にロードできます:

        <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

ログイン後にコピー

上記の内容は、6 つの古典的な CSS 3 列レイアウトプランについてです。