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 カーネルと GNU プロジェクトに...
以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...
目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...
エディターは 2 つのカテゴリに分かれていると思います。1 つは、即時レンダリングを実現するために左...
この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...
1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...
目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...
MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...
Win10 システムに MySQL 8.0 をインストールする際に発生する問題と解決策は次のとおりで...
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...