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 でさまざまなスペースの特徴と表現を探る (推奨)

推薦する

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

ページ内の検索エンジンの呼び出しはBaiduを例に挙げています

今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

jsはreduceメソッドを使用してコードをよりエレガントにします

序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...

JavaScript は div マウス ドラッグ効果を実装します

この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考まで...

MySQL での replace と replace into の使い方の説明

MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...

MySQL 使用仕様の概要

1. InnoDBストレージエンジンを使用する必要がありますCPU と IO のパフォーマンスが向上...

Vue でメニュー権限制御を実装するためのサンプルコード

バックエンド管理システムで作業している場合、通常、メニュー権限制御に関連する問題に遭遇します。もちろ...

両側にCSS固定レイアウト、中央に適応レイアウトを実装

フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...

DockerのIDEA構成プロセス

IDEA は Java で最も一般的に使用されている開発ツールであり、Docker は最も人気のある...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する

マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...