如何使用 CSS 和 JavaScript 將可變高度的 Div 排列成整齊的行？

可變高度的CSS 浮動Div

挑戰在於在固定寬度的父級中容納無限數量的可變高度div，確保它們排列整齊，如所提供的圖像所示。由於高度變化，嘗試利用浮動或內聯塊顯示屬性已被證明具有挑戰性。

解決方案：

不幸的是，僅透過 CSS 解決此問題目前不可行在所有瀏覽器中。浮點數和內聯塊方法都有限制。基於位置的解決方案需要手動像素調整或依賴伺服器端程式碼進行自動像素調整。

jQuery Masonry 來救援：

要有效處理這種情況，建議使用jQuery Masonry 的強大功能，這是一個專門為動態組織和排列元素而設計的庫。 Masonry 會根據 div 的高度和可用空間自動調整 div 的佈局，從而產生視覺上有吸引力且響應靈敏的排列。

實作：

要實作 Masonry，只需下載庫並將其包含在您的 HTML 檔案中。然後，以您的 div 容器作為目標初始化 Masonry：

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

這將使 Masonry 能夠管理容器內的 div 排列，確保它們以最佳方式放置，無論它們的高度差異如何。

jQuery Masonry的好處：

• 元素自動調整版面配置
• 支援不規則元素高度
• 動態反應頁大小調整
• 簡單且用戶友善的實現

以上是如何使用 CSS 和 JavaScript 將可變高度的 Div 排列成整齊的行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！