CSS の古典的な 3 列レイアウトを実装する方法-CSSチュートリアル-php.cn

CSS の古典的な 3 列レイアウトを実装する方法

php中世界最好的语言

リリース： 2018-01-30 10:00:11

オリジナル

1511 人が閲覧しました

今回は、CSSの古典的な3列レイアウトの実装方法と、CSSの古典的な3列レイアウトを実装する際の注意点について説明します。実際のケースを見てみましょう。

この記事では 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>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

ログイン後にコピー

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

<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;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

ログイン後にコピー

長所: シンプル

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

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;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

ログイン後にコピー

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>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</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% に設定することです。左の列が最初の行の先頭に移動します。次に、右のマージン左をその幅の負の値 -100px に設定すると、右の列も左および中央の列と同じ行に移動されます:

しかし、まだ終わっていません。メインに追加しますテキスト:

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</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;
}

ログイン後にコピー

以上です、完了です:

この方法はマスターできたと思います。これらの事例を読んだ後、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

HTML5で円アニメーション効果を作成する方法

h5で携帯電話にページズームを実装する方法

H5 Canvasを使用して3D動的チャートを実装する方法

H5 の FileReader ディストリビューションを使用してファイルを読み取る方法とそのメソッドの紹介

以上がCSS の古典的な 3 列レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。