さまざまな高さの浮遊要素によって引き起こされる位置ずれした列を修正するにはどうすればよいですか?

可変高さの浮動要素により列のラインナップが乱される

複数列レイアウトで可変高さのコンテンツを操作する場合、一般的に次のような問題が発生します。背の高い要素によって兄弟が正しく位置合わせできないという問題が発生します。これは、float を使用して要素を配置する場合に発生する可能性があります。これは、最も高い要素により後続の要素が強制的にその下にフローティングされ、目的の列構造が壊れるためです。

これを解決するには、CSS を利用して行を作成できます。要素の行単位の配置。次のルールを追加することで、JavaScript や jQuery に頼らずにレイアウトを修正できます:

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

このルールでは、nth-of-type(3n 1) は 3 つの要素の各行の最初の要素をターゲットとします。 。この要素に clear:left を適用すると、フローティング コンテキストが効果的にリセットされ、後続の要素がその下に適切に配置されるようになります。

この簡単な CSS 変更により、2 行目の要素が最初の行の下に整列し、要素内のコンテンツの高さの変化に関係なく、必要な列構造を実現します。

以上がさまざまな高さの浮遊要素によって引き起こされる位置ずれした列を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。