CSS 3カラムレイアウトの実装方法まとめ（コード例）

この記事ではCSSの3カラムレイアウトの実装方法（コード例）をまとめていますので、お困りの方は参考にしていただければ幸いです。

フロントエンドでは、レイアウトも習得する必要があります。適切なレイアウトを使用すると、ページがより美しく見えます。レイアウトに関して言えば、CSS の 3 列レイアウトについて話さなければなりません。これはフロントエンドの面接でよく聞かれる質問であり、基本的な質問と考えられます。いわゆる 3 列レイアウトは、一般に、左側と右側が固定で中央が適応的、または中央が固定で左側と右側が適応的であることを指します。

固定中央アダプティブ左側と右側

Holy Grailレイアウト

HTML構造設定

3つの要素を含む新しい親要素を作成します子要素: left、main、right (main が前に書かれているため、ページがレンダリングされるときに中央の部分が最初にロードされ、インタビューの質問の場合は中央の部分が最初にロードされることに注意してください)

style スタイル設定

1. 親要素の高さを設定します
2. 3 つの要素はすべて float に設定されます
3. 中央のメイン部分の幅は 100% に固定されます: width: 100 %、左側と右側は製品の要件に従って幅と高さを設定します
4. 左側に margin- を設定します: -100% 右側に margin-right を設定します: -right ボックス幅
5親要素は、padding-left: 左のボックスの幅を設定します。padding-right: 右のボックスの幅を設定します。
6. 左と右のボックスの相対的な位置

<div>
  <div>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div></div>
  <div></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

このレイアウトが内部要素の影響を受けて破壊される確率。低レイアウトですが、ブラウザ画面をある程度縮小すると、左右のコンテンツがはみ出したり重なったりします。解決策は、本体に最小幅 (少なくとも左右の幅の合計より大きい) を追加することです。

Double Flying Wing Layout

このアイデアは、聖杯のレイアウトですが、微妙な違いがいくつかあります。

HTML 構造設定

3 つの子要素 ​​(left、main、right) を含む新しい親要素を作成します (main は前に書かれているため、インタビューの質問の場合は、最初に中央部分をロードします)

style スタイル設定

1. 親要素の高さを設定します
2. 3 つの要素すべてに float を設定します
3. 中央のメイン パーツの幅は 100 % に固定されています。幅: 100%、製品要件に従って左側と右側の幅と高さを設定します。
4. メイン パーツにボックス インナーを追加します。中央にコンテンツを配置します (聖杯レイアウトとは異なります)
5. 左側に margin-left を設定します: -100%; 右側に margin-right を設定します: -right ボックス幅
6. 新しいボックスを追加します。 box、inner、左右のパディングまたはマージンを設定します

<div>
   <div>
      <div>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div></div>
   <div></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

セルフフローティング

HTML構造設定

3つの新しい要素を作成します: left、right、main (note、main)は最後に書いてあります)

style スタイル設定

1. 左のボックスは左にフロートし、右のボックスは右にフロートします
2. 中央部分のマージンまたはパディングの値を設定します

<div></div>
<div></div>
<div>我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

CSS3 の新機能: flex

HTML 構造設定

3 つの子要素 ​​( left 、 main 、 right ) を含む新しい親要素を作成します (main は次のように記述されていることに注意してください)中央)

style スタイル設定

1. 親要素の幅を 100% に設定します。表示: flex;
2. 左右は製品要件に従って設定します。 width と height
3. 中央部分に flex を設定します: 1;

<div>
  <div></div>
  <div>我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

他にも記述方法があるため、ここでは詳細は説明しませんが、より一般的なものをいくつか列挙します。使用済みのもの、およびインタビューで尋ねられる可能性のあるもの。 CSS3 には、仕事や勉強中に深く学ぶ価値のある興味深い機能も多数あります。

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

フローティングネガティブマージン (聖杯レイアウト)

HTML 構造設定

left、main、right の 3 つのサブ要素を含む新しい親要素を作成します (main は中央に書かれていることに注意してください)

style スタイル設定

1 左側と右側。それぞれ幅の 50% を占めます
2. 左側の負のマージン margin-left は、中央の p
の幅の半分を占めます 3. 右の負のマージン margin-right も、中央の p

の幅の半分を占めますmiddle p

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

CSS3 の新機能: flex

HTML 構造設定

3 つの子要素 ​​(left、main、right) を含む新しい親要素を作成します

スタイル設定

1. 親要素の設定表示: flex; flex-direction: row;

2. flex-grow: 1 を左右に設定し、残りのスペースを均等に分割します。 #

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3 feature calc (四則演算)

は、長さの値を動的に計算するために使用されます。演算子の前後にスペースを確保する必要があることに注意してください (例: width: calc(100% - 50px))。

HTML 構造設定

3 つの子要素 ​​(left、main、right) を含む新しい親要素を作成します。

style スタイル設定

1. settings 100% width;
2. 左右の幅を設定します: calc(50%, - middle width/2)

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }

道は長くて、あなたがそれほど賢くない場合他の人たちと同じように、一生懸命働き続けて、努力すれば自分の欠点を補えると信じてください。毎日少しずつ進歩していけば、いつか大きな一歩を踏み出すことができるでしょう。

以上がCSS 3カラムレイアウトの実装方法まとめ（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。