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 アプリケーション構成
おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...
必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...
問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...
Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...
CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...
必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...
データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...
たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...
目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...
目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...