如何使用 CSS 创建可变高度 Div 的无缝多行布局？

CSS 中可变高度的浮动 Div

问题陈述

目标是显示具有固定宽度的父容器内具有不同高度的无限数量的 div。 div 应无缝地流入行，如提供的图像所示。然而，使用 CSS 浮动或内联块显示会导致高度差异，从而破坏所需的布局。

解决方案

遗憾的是，仅使用纯 CSS 实现此布局是不行的在所有主流浏览器中均可行。由于 div 的高度不可预测，浮动 div 或内联块显示等传统解决方案会遇到挑战。

jQuery Masonry

要解决此问题，建议：利用 jQuery Masonry 的功能，这是一个强大的 JavaScript 库，可通过可定制的配置促进响应式布局管理。 Masonry 动态分析 div 的高度，自动将它们排列成列和行，同时保持每行内的高度相等，从而优化容器内的空间利用率。

示例

考虑所提供的 CSS 和 HTML 代码，它们最初尝试使用有缺陷的 CSS 方法来解决问题。通过集成 jQuery Masonry，如下所示，我们可以有效地解决高度可变性并实现所需的布局：

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

通过使用 Masonry，div 可以自主调整其高度，从而产生干净且美观的网格 -像布局。该解决方案消除了与纯 CSS 方法相关的手动像素调整和浏览器兼容性问题。

以上是如何使用 CSS 创建可变高度 Div 的无缝多行布局？的详细内容。更多信息请关注PHP中文网其他相关文章！