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

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

推薦する

CSS の読み込みによってブロックが発生しますか?

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

HTMLからPDFへの変換のための純粋なクライアント側と純粋なサーバー側の実装ソリューション

必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

Dockerはコンテナに入るためにnsenterツールを使用する

Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

HTML、CSS、JSコメントの標準的な使用法の概要

必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...

mysqldump を使用した MySql のインポートおよびエクスポート方法の概要

データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...

Linuxで相対パスを表現する方法

たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Linux の grep コマンドと egrep コマンドの詳細な説明

反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

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

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...

Windows に mysql5.7.28 winx64 の解凍バージョンをインストールするための詳細なチュートリアル

目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...