CSS 複数 3 列適応レイアウト実装の詳細な説明

CSS 複数 3 列適応レイアウト実装の詳細な説明

序文

従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれています。

1つ目: float実装に基づく

実装のアイデア

従来の考え方では、左と右の Aside をそれぞれ左側と右側に浮かせることになります。

コードの実装

<!-- HTML セクション -->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <header>ここにヘッダーがあります</header>
  <!-- 脇に置き、中央にコンテンツを配置 -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- 中央のコンテンツは、右側が圧迫されるのを防ぐために右の列の下に配置されます。 -->
    <div class="content">ここにコンテンツがあります</div>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  .clearfix {
    ズーム: 1;
    &::後 {
      表示: ブロック;
      コンテンツ: ' ';
      クリア:両方
    }
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%
    }
    。容器 {
      幅: 100%
      高さ: 100%
      ヘッダー {
        高さ: 80px;
        背景: rgba(0, 0, 0, 0.5)
      }
      フッター {
        高さ: 80px;
        背景: rgba(0, 0, 0, 0.5)
      }
      。真ん中 {
        高さ: calc(100% - 80px - 80px)
        脇に
          高さ: 100%;
          幅: 300ピクセル;
          背景: rgba(156, 154, 249, 1)
        }
        。左 {
          フロート: 左
        }
        。右: {
          フロート: 右
        }
      }
    }
  }
</スタイル>

成果を達成する

2番目の方法:位置に基づく:絶対実装

実装のアイデア

中央の 3 つの列の親に対して position: relative を割り当て、左と右の Aside 列に position: absolute を割り当て、それぞれ left: 0 と right: 0 width: custom 値を割り当てます。中央のコンテンツの左と右に、それぞれ左と右の幅と同じ幅を割り当てます。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS 関連コード -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%
  }
  
  。容器 {
    幅: 100%;
    高さ: 100%;
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      高さ: calc(100% - 80px - 80px);
      位置: 相対的;
      さて、
      。コンテンツ {
        位置: 絶対;
      }
      。左 {
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
        左: 0;
        高さ: 100%;
      }
      。右 {
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
        右: 0;
        高さ: 100%;
      }
      。コンテンツ {
        左: 300ピクセル;
        右: 300px;
      }
    }
  }
</スタイル>

成果を達成する

3番目の方法:ディスプレイに基づく:フレックス

実装のアイデア

左、中央、右の列の親にdisplay: flexを指定し、左と右のAside幅にカスタム値を指定し、中央のコンテンツにflex:1を指定します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      ディスプレイ: フレックス;
      高さ: calc(100% - 80px - 80px);
      脇に
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
      }
      。コンテンツ: {
        フレックス: 1;
      }
    }
  }
</スタイル>

成果を達成する

4番目の方法:表示に基づく:テーブルの実装

実装のアイデア

左、中央、右の列の親に display: table、width: 100% を指定し、左、中央、右の列にそれぞれ display: table-cell を指定し、左と右の Aside 幅をそれぞれ指定します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      表示: テーブル;
      幅: 100%
      高さ: calc(100% - 80px - 80px);
      脇に
        幅: 300ピクセル;
        表示: テーブルセル;
        背景: rgba(156, 154, 249, 1);
      }
      。コンテンツ: {
        表示: テーブルセル;
      }
    }
  }
</スタイル>

成果を達成する

5番目: ディスプレイに基づく: グリッド実装

実装のアイデア

左、中央、右の列の親に display: grid を指定し、grid-template-columns: 300px auto 300px を使用して、幅が 300px、auto、300px の 3 つの列に分割します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      表示: グリッド;
      グリッドテンプレート列: 300px 自動 300px;
      高さ: calc(100% - 80px - 80px);
      脇に
        背景: rgba(156, 154, 249, 1);
      }
    }
  }
</スタイル>

成果を達成する

以上で、CSS での各種 3 列アダプティブ レイアウトの実装について詳細に解説した記事は終了です。CSS 3 列アダプティブ レイアウトに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL での select、distinct、limit の使用

>>:  HTML でさまざまなスペースの特徴と表現を探る (推奨)

推薦する

VMware Workstation に Windows Server 2019 をインストールする (グラフィック チュートリアル)

キーの入力を求められた場合は、[キーがありません]を選択します。デスクトップエクスペリエンスを選択す...

React onClickにパラメータを渡す問題について話しましょう

背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

CSSアニメーションを途中で止めて姿勢を維持する方法

序文かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが...

バントリストコンポーネントをスクロールしても、スクロールバーの位置は保持されます。

バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...

MySQLにおけるrow_numberの実装プロセス

1. 背景一般的に、データ ウェアハウス環境では、row_number 関数を使用して特定のディメン...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

CSS スティッキーフッターのいくつかの実装

「スティッキーフッター」とはいわゆる「スティッキー フッター」は、新しいフロントエンドの概念や技術で...

WeChat ミニプログラム 宝くじ番号ジェネレーター

この記事では、WeChatアプレットの宝くじ番号ジェネレータの具体的なコードを参考までに紹介します。...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 36)

データのバックアップと復元パート2は次のとおりです基本的な概念:バックアップ、現在のデータまたはレコ...

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...

システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...

柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...

CSS エラスティック ボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...