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 アプリケーション構成

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