CSSは6つの適応型2列レイアウト方法を実装しています

CSSは6つの適応型2列レイアウト方法を実装しています

HTML構造

  <本文>
        <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
        </div>
   </本文>

方法1: フレックスレイアウト

.ラッパー{
    ディスプレイ:フレックス;
}
。左{
    幅:200px;
    高さ:400px;
    背景:黒;
}
。右{
    フレックス:1;
    高さ:400px;
    背景:赤;
}

方法2: フローティング

。左{
    フロート:左;
    幅:200px;
    高さ:400px;
    背景:黒;
}
。右{
    背景:赤;
    高さ:400px;
}

方法3: BFC

。左{
    幅:200px;
    高さ:400px;
    フロート:左;
    背景:黒;
}
。右{
    オーバーフロー:非表示;
    高さ:400px;
    背景:赤;
}

方法4: 絶対位置指定

.ラッパー{
    位置:相対;
}
。左{
    幅:200px;
    高さ:400px;
    背景:黒;
}
。右{
    位置:絶対;
    トップ:0;
    左:200px;
    右:0;
    下:0;
    背景:赤;
}

方法5: テーブルレイアウト

.ラッパー{
    表示:テーブル;
    幅:100%;
}
.左、.右{
    表示:テーブルセル;
    高さ:400ピクセル
}
。左{
    背景:黒;
}
。右{
    背景:赤;
}

方法6: グリッドレイアウト

.ラッパー{
    表示:グリッド;
    幅:100%;
    高さ:400px;
    グリッドテンプレート列:200px 自動;
}
。左{
    背景:黒;
}
。右{
    背景:赤;
}

これで、CSS を使用した 6 つのアダプティブ 2 列レイアウトの実装方法についての記事は終了です。CSS を使用したアダプティブ 2 列レイアウトの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Docker クロスサーバー通信オーバーレイソリューション (パート 1) Consul 単一インスタンス

>>:  WebページでjQueryを参照する方法

推薦する

JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...

URLエスケープエンコーディングの特殊文字に基づいて

目次URL 内の特殊文字URL 特殊文字エスケープ、URL 内の一部の文字には特別な意味があり、基本...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

サイト全体を灰色にするCSSコードのまとめ

国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

MySQLスレーブのメンテナンスに関する経験の共有

序文: MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...

JavaScript配列の一般的なメソッドの例のまとめ

目次一般的な配列メソッドconcat() メソッドjoin() メソッドpop() メソッドpush...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

フロントエンドページのポップアップマスクはページのスクロールを禁止します

フロントエンド開発者がよく遭遇する問題は、ユーザーに情報を提示するためのポップアップ ウィンドウを作...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

複数のネットワークカードを備えた Linux システムでのルーティング構成の詳細な説明

Linux でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...

Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)

MySQLをアンインストールする1. コントロールパネルで、MySQLのすべてのコンポーネントをア...

Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法

昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...

MySQL データベースの 1045 エラーの解決方法

ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...