CSS と JavaScript を使用して、可変高さの Div を整然とした行に配置するにはどうすればよいですか?

可変高さの CSS Floating Divs

課題は、固定幅の親内に無限の高さ可変 div を収容することにあります。提供された画像に示されているように、きちんとした列に配置されていることを確認します。 float または inline-block の表示プロパティを利用しようとする試みは、高さの変動により困難であることが判明しました。

解決策:

残念ながら、CSS だけでこの問題を解決することは、現時点では実現できません。すべてのブラウザで。フロートとインラインブロックのアプローチには両方とも制限があります。位置ベースのソリューションでは、手動でピクセルを調整するか、自動ピクセル調整のためにサーバー側のコードに依存する必要があります。

jQuery Masonry to the Rescue:

この状況に効果的に対処するには、要素を動的に整理および配置するために特別に設計されたライブラリである jQuery Masonry の機能を活用することをお勧めします。 Masonry は高さと利用可能なスペースに基づいて div のレイアウトを自動的に調整し、視覚的に魅力的で応答性の高い配置を実現します。

実装:

Masonry を実装するには、ダウンロードするだけです。ライブラリをダウンロードして HTML ファイルに含めます。次に、div コンテナをターゲットとして Masonry を初期化します。

var container = document.querySelector('#holder');
var mason = new Masonry(container, {});

これにより、Masonry がコンテナ内の div 配置を管理できるようになり、高さの違いに関係なく最適に配置されるようになります。

jQuery Masonry の利点:

• 要素のレイアウト
• 不規則な要素の高さのサポート
• ページのサイズ変更に対する動的な応答
• シンプルでユーザーフレンドリーな実装

以上がCSS と JavaScript を使用して、可変高さの Div を整然とした行に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。