如何使用 CSS 和 jQuery 實現具有不同高度的 Div 的響應式列佈局？

可變高度的CSS 浮動Div

使用CSS 浮動在容器中排列div挑戰高度。如提供的範例所示，當高度不同時，列中的浮動 div 會中斷。

CSS 限制：

不幸的是，沒有純 CSS 解決方案可以完美解決此問題跨所有瀏覽器。

• 浮動可能會導致對齊和重疊。
• 內聯塊元素無法正確環繞較高的元素。
• 使用絕對定位需要手動調整像素，這對於動態內容來說是不切實際的。

解決方案：jQuery Masonry

此場景的建議解決方案是使用 jQuery Masonry 外掛。此插件智慧地排列容器內的元素，自動調整行和列以適應可變的高度。

實現：

1. 包含jQuery Masonry 庫在你的專案：

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

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

在目標容器上初始化Masonry：使用 Masonry，您提供的程式碼現在將正確排列根據需要，列中的 div，無論其高度如何。它為具有可變內容的靈活佈局提供了可靠的解決方案。

以上是如何使用 CSS 和 jQuery 實現具有不同高度的 Div 的響應式列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！