CSS レイアウト例シリーズ (4) ブラウザの幅が変わると、コンテナの各行のサブコンテナの数が変わることをどのように認識するか? _html/css_WEB-ITnose

こんにちは、子供たち、私が誰であるか覚えていますか？ちなみに、私は ~Chaowei~ です。 さて、本題に戻ります。今日のレイアウト例は次のとおりです。

フローティング レイアウトを実装します。ブラウザの幅の変更に応じて、赤いコンテナの各行にある青いコンテナの数が変わります。 、以下に示すように:

誰かが心の中でつぶやいているに違いありません、はぁ〜とても単純です、それはすべてが左に浮かんでいるという意味ではありませんか？心配しないでください。実際には穴がたくさんあります。一つずつ埋めていきます。

1. このようなレイアウトを実現するには、まず次の HTML が必要です:

   <div id="float-container">         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div>         <div class="float-element"></div></div>

   ログイン後にコピー

2. 次に、次のように CSS を書き始めます:

   #float-container {    background-color: red;}.float-element {    float: left;    width: 50px;    height: 30px;    background-color: blue;    margin: 10px;}

   ログイン後にコピー

   それぞれの小さなコンテナを左側にフロートさせ、マージン、つまりフローティング レイアウトを設定します。ブラウザの幅に応じて位置を適応的に変えることはできていますか？もちろん違います。効果は次のようになります:

3. おい、約束した背景が赤い大きなコンテナはどこだ、なぜ隠れているんだ?確認したところ、大きいコンテナのdivの幅と高さを設定するのを忘れていたことが判明したので、幅と高さを設定します。大きなコンテナーの適応が必要なため、100% に設定しましょう:

   #float-container {    background-color: red;    height: 100%;    width: 100%;}.float-element {    float: left;    width: 50px;    height: 30px;    background-color: blue;    margin: 10px;}

   ログイン後にコピー

   OK、リフレッシュしてください。なぜ大きなコンテナがまだ出ていないのですか？

4. それでは、なぜ大きなコンテナが見えないのか分析してみましょう。 div が要素をラップしない場合、幅と高さのパーセンテージは影響しないためです。

   では、なぜ大きなコンテナは明らかに 9 つの div をラップしているのに、幅と高さのパーセンテージは影響を与えないのでしょうか?小さいコンテナはすべて左にフロートするように設定されており、ドキュメント フローから外れているため、大きいコンテナは小さいコンテナを囲みません。次に、大きなコンテナには適応性を持たせたいが、小さなコンテナでは幅が変化したときに各行の数を自動的に調整できるようにしたいと考えています。 BFC マスターを招待する時間です。はい、BFC 原則については 3 回連続のサンプル ブログで説明しました。これは、この原則が非常に役立つためです (BFC の概要については、このサンプル シリーズの 2 番目の記事を参照してください)。ここで、大きなコンテナに overflow: hidden; を追加して、それに含まれる浮動要素を自動的にクリーンアップします。次に、最終的なデモを見て、希望の効果が得られているかどうかを確認してください。

   CodePen の xal821792703 (@honoka) による Pen float-container を参照してください。

最後に、読んでいただきありがとうございます。ご質問があれば、私のリポジトリにアクセスしてください。遠慮なく私に文句を言ってください。