如何使用 Zurb Foundation 和 SASS mixin 实现响应式 Pinterest 风格的布局？

Posted 2023-03-06

【中文标题】如何使用 Zurb Foundation 和 SASS mixin 实现响应式 Pinterest 风格的布局？

【英文标题】：How to implement a responsive Pinterest-style layout with Zurb Foundation and SASS mixins?

【发布时间】：2013-01-01 12:43:58

【问题描述】：

我正在将 Zurb Foundation 与 SASS 和 Compass 一起使用。我需要实现Pinterest 样式列布局，其中每个“面板/引脚”可以具有不同的高度，但所有面板/引脚具有相同的宽度。挑战在于将它们放置在没有垂直间隙的情况下；使用'css float'会留下垂直间隙。我一直在 Zurb Foundation 中尝试各种网格选项，但收效甚微。有没有实现 Pinterest 风格布局的 mixin？

【问题讨论】：

这里有问题吗？除非您对所需的 CSS 有所了解，否则 Sass 无法帮助您。

他们似乎在 Pinterest 上使用 position:absolute，然后使用 javascript 来计算页面上的定位。

【参考方案1】：

您将需要更多的工具，而不仅仅是基础。我建议您尝试将此添加到您的项目中http://masonry.desandro.com/

或者

更强大，但不能免费用于商业用途。 http://isotope.metafizzy.co/