CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示

このメソッドは主にオーバーフローを通じて BFC をトリガーし、BFC は浮動要素と重複しません。 overflow:hidden を設定しても IE6 ブラウザの haslayout プロパティはトリガーされないため、IE6 ブラウザと互換性を持たせるには zoom:1 を設定する必要があります。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    。親 {
      margin: 0 auto; // 親コンテナを水平中央に配置する overflow: hidden;
      ズーム: 1;
      最大幅: 1000px;
    }
    。左 {
      フロート: 左;
      右マージン: 20px;
      幅: 200ピクセル;
      背景色: 緑;
    }

    。右 {
      オーバーフロー: 非表示;
      ズーム: 1;
      背景色: 黄色;
    }
  </スタイル>
</head>
<本文>
  <div class="parent"> 
    <div class="left"> 
    <p>左、左、左、左</p> 
    </div> 
    <div class="right"> 
    <p>正しい</p> 
    <p>正しい</p> 
    </div> 
  </div> 
</本文>
</html>

2. フロート: 左 + マージン左

Float は左側の要素をドキュメントフローから除外し、右側の要素を左側の要素と同じ行に表示できるようにします。右側の要素が左側の要素を覆わないように margin-left を設定します。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    。親 {
      マージン: 0 自動;
      最大幅: 1000px;
    }
    .parent::after {
      コンテンツ: '';
      表示: テーブル;
      クリア: 両方;
    }
    。左 {
      フロート: 左;
      幅: 200ピクセル;
      背景色: 緑;
    }

    。右 {
      左マージン: 200px;
      背景色: 黄色;
    }
  </スタイル>
</head>
<本文>
  <div class="parent"> 
    <div class="left"> 
    <p>左、左、左、左</p> 
    </div> 
    <div class="right"> 
    <p>正しい</p> 
    <p>正しい</p>
    <p>正しい</p> 
    </div> 
   </div> 
</本文>
</html>

3. 位置: 絶対 + 左余白

左側に絶対位置を指定し、右側に margin-left を設定する場合、コードは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    。親 {
      位置: 相対的;
      マージン: 0 自動;
      最大幅: 1000px;
    }

    。左 {
      位置: 絶対;
      幅: 200ピクセル;
      背景色: 緑;
    }

    。右 {
      左マージン: 200px;
      背景色: 黄色;
    }
  </スタイル>
</head>
<本文>
  <div class="parent"> 
    <div class="left"> 
    <p>左、左、左、左</p> 
    </div> 
    <div class="right"> 
    <p>正しい</p> 
    <p>正しい</p>
    <p>正しい</p> 
    </div> 
   </div> 
</本文>
</html>

4. フレックスレイアウト

フレックスレイアウトでは、2 つの子要素を同じ行に表示できます。左側の幅が固定されていれば、効果が得られます。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    。親 {
      ディスプレイ: フレックス;
      マージン: 0 自動;
      最大幅: 1000px;
    }
    。左 {
      幅: 200ピクセル;
      背景色: 緑;
    }

    。右 {
      左マージン: 20px;
      フレックス: 1;
      背景色: 黄色;
    }
  </スタイル>
</head>

<本文>
  <div class="parent">
    <div class="left">
      <p>左、左、左、左</p>
    </div>
    <div class="right">
      <p>正しい</p>
      <p>正しい</p>
      <p>正しい</p>
    </div>
  </div>
</本文>
</html>

これで、CSS で固定左と適応右の 2 列レイアウトを実現する 4 つの方法についての記事は終了です。CSS で 2 列レイアウトを実現する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Zabbix 監視 Docker アプリケーション構成

>>:  フォーム要素属性の読み取り専用と無効の使用の比較

推薦する

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...

ボリュームを使用してホストと Docker コンテナ間でファイルを転送する方法

以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...

Ace をベースにした Markdown エディターを共有する

エディターは 2 つのカテゴリに分かれていると思います。1 つは、即時レンダリングを実現するために左...

JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

Mysql5.7.17 winx64.zip 解凍バージョンのインストールと設定のグラフィックチュートリアル

1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...

MySQL の例 DTID マスタースレーブ原理の分析

目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...

MySQLでJSONフィールドを操作する方法

MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...

Win10システムにMySQL 8.0をインストールするときに発生する問題を解決する

Win10 システムに MySQL 8.0 をインストールする際に発生する問題と解決策は次のとおりで...

JavaScript配列の組み込みメソッドの詳細な説明

目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...

MySQL 5.7 で my.ini ファイルが見つからない場合の解決策

my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...

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

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