jQuery Masonry を使用して CSS で可変高さの Floating Div を作成するにはどうすればよいですか?

CSS での高さ可変の Floating Div の作成: 総合ガイド

CSS で高さ可変の Floating Div を実現するには、大きな課題が伴います。 float または display: inline-block を利用する試みは、固有の制限により失敗することが判明しています。

従来のアプローチの制限

• Floats: 浮動 div は水平方向にのみ隣り合うことができるため、変数が存在する場合は行が不均一になります。 heights.
• Display: Inline-Block: インライン ブロック要素は自動的に新しい行に折り返すことができないため、高さの高い div が親コンテナの境界を越えて拡張されます。

代替ソリューション: jQuery Masonry

を克服するにはこれらの制限がある場合、一般的な解決策は jQuery Masonry です。この JavaScript プラグインは、最小列幅を動的に計算し、最も高い列の高さに基づいて div 配置を最適化します。その結果、手動でのピクセル調整や複雑な計算を行わなくても、高さの異なる div が列内に美しく整列されます。

実装

次の手順は、jQuery Masonry の利用方法を示しています。

1. HTML に jQuery と jQuery Masonry を含めるdocument.
2. CSS スタイルを親コンテナに追加して、幅と表示プロパティを定義します。
3. Masonry プラグインを使用して親コンテナで Masonry を初期化し、コンテナの ID またはクラスを引数として渡します.

例コード

  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


  <div><p>jQuery Masonry を活用することで、開発者は CSS で高さ可変のフローティング div を簡単に実現でき、要素の高さに関係なくエレガントで応答性の高いレイアウトを確保できます。</p></div>

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