如何使用 CSS 和 jQuery 实现具有不同高度的 Div 的响应式列布局？

可变高度的 CSS 浮动 Div

使用 CSS 浮动在容器中排列 div 在处理不同高度的元素时通常会带来挑战高度。如提供的示例所示，当高度不同时，列中的浮动 div 会中断。

CSS 限制：

不幸的是，没有纯 CSS 解决方案可以完美解决此问题跨所有浏览器。

• 浮动可能会导致对齐和重叠。
• 内联块元素无法正确环绕较高的元素。
• 使用绝对定位需要手动调整像素，这对于动态内容来说是不切实际的。

解决方案：jQuery Masonry

此场景的推荐解决方案是使用 jQuery Masonry 插件。该插件智能地排列容器内的元素，自动调整行和列以适应可变的高度。

实现：

1. 包含 jQuery Masonry 库在你的项目：

   <script src="masonry.pkgd.js"></script>

2. 在目标容器上初始化 Masonry：

   $('#container').masonry();

使用 Masonry，您提供的代码现在将正确排列根据需要，列中的 div，无论其高度如何。它为具有可变内容的灵活布局提供了可靠的解决方案。

以上是如何使用 CSS 和 jQuery 实现具有不同高度的 Div 的响应式列布局？的详细内容。更多信息请关注PHP中文网其他相关文章！