CSS と jQuery を使用して、さまざまな高さの Div を含むレスポンシブな列レイアウトを実現するにはどうすればよいですか?

高さが可変の CSS Floating Divs

CSS float を使用してコンテナ内に div を配置すると、さまざまな高さの要素を扱うときに課題が生じることがよくあります。ハイツ。提供された例で示されているように、高さが異なると列内の浮動 div が壊れます。

CSS の制限:

残念ながら、この問題を完全に解決する純粋な CSS ソリューションはありません。すべてのブラウザで使用できます。

• Float は配置と問題を引き起こす可能性があります。重複しています。
• インライン ブロック要素は、背の高い要素の周囲に適切に折り返されません。
• 絶対位置を使用するには、手動でピクセルを調整する必要があり、動的コンテンツの場合は現実的ではない可能性があります。

解決策: jQuery Masonry

このシナリオで推奨される解決策は次のとおりです。 jQuery Masonry プラグインを使用します。このプラグインは、コンテナ内の要素をインテリジェントに配置し、可変の高さに合わせて行と列を自動的に調整します。

実装:

1. jQuery Masonry ライブラリが含まれます。あなたの中でプロジェクト:

   <script src="masonry.pkgd.js"></script>

2. ターゲット コンテナ上の Masonry の初期化:

   $('#container').masonry();

Masonry を使用すると、指定したコードが適切に配置されるようになります。必要に応じて、高さに関係なく、列内の div を指定します。可変コンテンツを含む柔軟なレイアウトのための信頼できるソリューションを提供します。

以上がCSS と jQuery を使用して、さまざまな高さの Div を含むレスポンシブな列レイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。