如何使用 CSS 建立可變高度 Div 的無縫多行版面？

CSS 中可變高度的浮動Div

問題陳述

問題陳述

目標是顯示具有不同目標固定寬度的父容器內具有不同高度的無限數量的div。 div 應無縫地流入行，如提供的圖像所示。然而，使用 CSS 浮動或內聯塊顯示會導致高度差異，從而破壞所需的佈局。

解決方案

遺憾的是，僅使用純 CSS 實現此佈局是不行的在所有主流瀏覽器中均可行。由於 div 的高度無法預測，浮動 div 或內聯塊顯示等傳統解決方案會遇到挑戰。

jQuery Masonry

要解決此問題，建議：利用jQuery Masonry 的功能，這是一個強大的JavaScript 庫，可透過可自訂的配置促進響應式佈局管理。 Masonry 動態分析 div 的高度，自動將它們排列成列和行，同時保持每行內的高度相等，從而優化容器內的空間利用率。

範例

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

考慮所提供的 CSS 和 HTML 程式碼，它們最初嘗試使用有缺陷的 CSS 方法來解決問題。透過整合jQuery Masonry，如下所示，我們可以有效地解決高度可變性並實現所需的佈局：透過使用Masonry，div 可以自主調整其高度，從而產生乾淨且美觀的網格-像佈局。該解決方案消除了與純 CSS 方法相關的手動像素調整和瀏覽器相容性問題。

以上是如何使用 CSS 建立可變高度 Div 的無縫多行版面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！