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

高さが変動するフローティング要素のレイアウトの歪み: 包括的な修正

高さが異なるフローティング要素を使用すると、高さの高い要素でレイアウトの問題が発生するのが一般的です。要素により、後続の兄弟が適切に整列することが妨げられます。これにより、上記の例のように、1 つの細長い要素によってフローティング要素の行がバラバラになるなど、望ましくない外観が発生する可能性があります。

これを解決するには、CSS を利用して適切な配置を確保できます。次のルールを追加することで、

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

3 つおきの Figure 要素の左側を「クリア」するように指定します。これにより、float シーケンスが効果的に終了し、後続の要素が最初の 3 つの要素の下に強制的に配置されます。

このソリューションは効率的かつ視覚的に魅力的であり、JavaScript や jQuery などの外部ツールを必要とせずに意図したレイアウトを維持します。

ライブ デモンストレーション

すべての要素のシームレスな調整を確認するには、改訂された jsFiddle サンプルを参照してください。さまざまな高さに関係なく、Figure 要素: http://jsfiddle.net/KatieK/5Upbt/

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