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

高さが可変のフローティング要素によるレイアウトの歪み

フローティング レイアウトで高さの可変の要素を操作する場合、高さが高くなる状況に遭遇することは珍しくありません。要素が後続の兄弟を下に押し込み、意図したグリッド構造を壊します。

次のことを考慮してください。例: 6 つの図形要素は、3 つずつ 2 つの行を形成するように設計されています。ただし、要素の高さが異なるため、4 番目の Figure 要素が最初の行を超えて広がり、5 番目と 6 番目の要素がオフセットされます。

この例で使用されている CSS は簡単です。

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

レイアウトの歪みに対処するために、各行の最初の要素を特に対象とする CSS ルールを導入できます。左のフロートをクリアすることで、後続の兄弟がその下に水平に整列されるようにします。

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

このルールは、4 番目の Figure 要素に新しい行の開始を強制することで、整列の問題を解決します。その後、5 番目と 6 番目の要素が最初の 3 つの下に正しく配置されます。

更新されたサンプル レイアウトは意図したとおりになり、高さの違いに関係なく、各行が等間隔に配置された 3 つの Figure 要素で構成されます。

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