CSSを使用して中央に固定された2つの列と適応型列を実現する方法

CSSを使用して中央に固定された2つの列と適応型列を実現する方法

1. 絶対位置とマージンを使用する

この方法の原則は、左側と右側をドキュメントの流れから外れるように配置することです。 中央の領域はそれらの下に自然に流れ、それらの余白値を設定します

この方法では、ページ要素構造の順序を自由に変更できます。ただし、先頭の値を処理しないと、位置がずれる可能性があるので注意してください。

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='center'>中央</div>
    <div class='right'>右側</div>
</div>

CS

#容器 {
    位置: 相対的;
}
.左、.右{
    位置: 絶対;
    上: 0;
    幅: 200ピクセル;
    最小高さ: 500px;
    背景色: 赤;
}
。左 {
    左: 0;
}
。右 {
    右: 0;
}
。中心 {
    マージン: 0px 210px;
    最小高さ: 500px;
    背景色: 黄色;
}

2. フロートとマージンを使用する

この方法の原理は、左側と右側をフロートさせてドキュメントフローから外し、中央部分を通常のドキュメントフロー内にして、その余白値を設定することです。

この方法では、中央部分を最後に配置する必要があります。ウィンドウが特に小さい場合は、右側が圧迫されます。

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
    <div class='center'>中央</div>
</div>

CS

#容器 {
    位置: 相対的;
}
.左、.右{
    幅: 200ピクセル;
    最小高さ: 500px;
    背景色: 赤;
}
。左 {
    フロート: 左;
}
。右 {
    フロート: 右;
}
。中心 {
    最小高さ: 500px;
    マージン: 0px 210px;
    背景色: 黄色;
}

3. 聖杯レイアウト

この方法は最も一般的であり、3 つは相互に関連しており、最も堅牢です。

まず、真ん中の部分を前面に置き、容器の層で包みます。外側のコンテナにより画面全体の 100% を占め、左側、中央、右側はすべて float: left になります。 中央の左余白と右余白を両側のコンテナの幅に余白を加えた値に設定し、左の margin-left を -100% に設定して左端に表示し、右の margin-right を -200px に設定して右端に表示します。

html

<div id='コンテナ'>
    <div class='center_wrap'>
        <div class='center'>中央</div>
    </div>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
</div>

CS

#容器 {
    位置: 相対的;
}
.center_wrap、.left、.right{
    フロート: 左;
    最小高さ: 500px;
}
.center_wrap {
    幅: 100%;
}
.center_wrap .center{
    最小高さ: 500px;
    マージン: 0px 210px;
    背景色: 黄色;
}
.左、.右{
    幅: 200ピクセル;
    背景色: 赤;
}
。左 {
    左マージン: -100%;
}
。右 {
    左マージン: -200px;
}

4. CSS3 フレックス

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='center'>中央</div>
    <div class='right'>右側</div>
</div>

CS

#容器 {
    幅: 100%;
    ディスプレイ: フレックス;
}
.左、.右{
    幅: 200ピクセル;
    背景色: 赤;
    最小高さ: 500px;
}
。中心 {
    フレックス: 1;
    最小高さ: 500px;
    マージン: 0 10px;
    背景色: 黄色;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

>>:  JavaScript が Taobao の虫眼鏡効果を模倣

推薦する

Docker で Maven プロジェクトをより速くビルドする

目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析

質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

W3C チュートリアル (13): W3C WSDL アクティビティ

Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...

sbinディレクトリを生成せずにNginxをインストールするソリューション

エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...

Vue3ライフサイクル関数とメソッドの詳細な説明

1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

Docker Compose で環境変数を参照する方法の例

プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

Linux bash: ./xxx: バイナリ ファイルを実行できません エラー

今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...

Linux または Windows 環境での pytorch のインストールと検証 (runtimeerror 問題の解決)

1. pytorch公式サイトから対応するインストールファイルをダウンロードします。 https:...

HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...

CSS の div の下の同じ行にある複数の要素を右揃えにする

方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります(隙間がなくな...