高さの異なるフローティング要素によって壊れたレイアウトを修正するにはどうすればよいですか?

高さが異なるフローティング要素でレイアウトが壊れる

高さが異なるフローティング要素を操作する場合、きれいなレイアウトを維持するのが難しい場合があります。そのようなシナリオの 1 つは、一部の要素が他の要素よりも高く、後続の兄弟の位置がずれる場合です。

この問題に対処するために、CSS は賢明な解決策を提供します。

CSS ルールフロート要素の整列

figure:nth-of-type(3n+1) {
    clear: left;
}

このルールは、ブラウザに をクリアするよう指示します。最初の要素から順に 3 要素ごとに float 要素 を作成します。言い換えると、

• 最初、4 番目、および 7 番目の要素の後、float がクリアされ、後続の兄弟が新しい行を開始できるようになります。
• これにより、次の行が確実に実行されます。要素は、その内容に関係なく、最初の 3 つの要素のすぐ下に配置されます。 heights.

例

提供された HTML と CSS を考えてみましょう:

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

clear: left ルールを追加します。 :

figure:nth-of-type(3n+1) {
    clear: left;
}

レイアウトを修正し、図の 2 行目を修正しました最初の 3 つの下に配置:

[画像: 2 行目の図を最初の 3 つの下に配置してレイアウトを修正]

結論

クリアの利用: left ルールは、さまざまな高さの浮動要素を適切に整列させ、クリーンで整理された状態を維持するためのエレガントで効率的な方法を提供します。レイアウト。

以上が高さの異なるフローティング要素によって壊れたレイアウトを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。