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 建立可變高度 Div 的無縫多行版面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
