CSS を使用して高さ可変の Div のシームレスな複数行レイアウトを作成するにはどうすればよいですか?

CSS での可変高さの Floating Divs

問題ステートメント

目標は表示することです固定幅の親コンテナ内に、高さが異なる無限の div が存在します。提供された画像に示すように、div はシームレスに行に流れ込む必要があります。ただし、CSS フロートまたはインライン ブロック表示を使用すると、高さの不一致が生じ、目的のレイアウトが中断されます。

解決策

残念ながら、純粋な CSS だけを使用してこのレイアウトを実現することはできません。すべての主要なブラウザで実行可能です。フロート div やインライン ブロック表示などの従来のソリューションでは、div の高さが予測できないため、課題が発生します。

jQuery Masonry

この問題を解決するには、次のことをお勧めします。カスタマイズ可能な構成による応答性の高いレイアウト管理を容易にする強力な JavaScript ライブラリである jQuery Masonry の機能を活用します。 Masonry は div の高さを動的に分析し、各行内で同じ高さを維持しながら div を列と行に自動的に配置し、コンテナ内のスペース使用率を最適化します。

例

提供された CSS および HTML コードを考慮してください。最初は、欠陥のある CSS アプローチで問題を解決しようとします。以下に示すように jQuery Masonry を統合することで、高さの変動に効果的に対処し、目的のレイアウトを実現できます。

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

Masonry を利用することで、div は自律的に高さを調整し、クリーンで見た目に美しいグリッドが得られます。レイアウトみたいな。このソリューションは、純粋な CSS アプローチに伴う手動のピクセル調整とブラウザーの互換性の問題を排除します。

以上がCSS を使用して高さ可変の Div のシームレスな複数行レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。