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を参照する方法

推薦する

Tomcat の 404 エラーの解決方法の詳細な説明

Tomcat テストで 404 問題が発生します。問題は次のとおりです。 HTTP ステータス 40...

Win10にCentOS7仮想マシンをインストールする

1. VMware Workstation 64バージョンをダウンロードするhttps://www....

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

ウェブサイト製品設計の参考となるいくつかの原則

以下の分析は製品設計原則に関するものですが、そのほとんどはウェブサイト製品に基づいているため、ユーザ...

JS で if 判定をスムーズに行う方法

目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

Mysql通信プロトコルの詳細な説明

1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...

Windows 10 での mysql5.5 データベース コマンドラインの中国語文字化け問題を解決する

システムをリセットした後、かなり前にインストールした MySQL データベースのコンソール クエリで...

BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法

Baota PanelのPHP7.3バージョンがZipArchiveをサポートしていないため、プログ...

MySQL インデックス プッシュダウンの詳細

目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...

Linux ファイル管理コマンド例の分析 [権限、作成、削除、コピー、移動、検索など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...

jQuery を使用してカルーセル効果を実装する

この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...