如何使用 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中文网其他相关文章！