【问题标题】:Isotope - Fluid & masonry layout breaking into 2 columns同位素 - 流体和砌体布局分为 2 列
【发布时间】:2012-07-11 10:15:42
【问题描述】:

不确定是什么导致了这个问题,但我有一个流畅的布局,我的盒子宽度为 25%,每行有 4 个盒子。在调整大小时,我注意到发生间歇性错误,其中 4 列变成了损坏的两列。在此处查看我的视频:http://cl.ly/0s172D303X1M3H1v161z(单击在浏览器链接中查看)。

我发现问题在浏览器之间不一致,它在某些浏览器中有效,但在其他浏览器中无效。有人知道如何解决吗?

jsFiddle 在这里:http://jsfiddle.net/TVXve/

【问题讨论】:

    标签: jquery responsive-design fluid-layout jquery-isotope


    【解决方案1】:

    我发现这两个插件在使用绝对 px 值时效果最好。您是否尝试将 columnWidth 设置为百分比值?

    【讨论】:

    • 我该怎么做?我将这一行:columnWidth: container.width() / 4 更改为:columnWidth: 25% 但这破坏了布局,我想是因为我没有正确编写 JS?
    • 你会怎么做这个@Anriette ??
    • 很抱歉现在才回复,但我假设您已经看到了:isotope.metafizzy.co/demos/fluid-responsive.html
    • 是的,我有,但它没有给出具体的百分比来布置我的列。它仅根据容器的宽度计算 x 列。是否可以像您建议的那样为每列指定 25% 的特定宽度?
    • 我会指定width:25%; 和min-width,因为你不希望你的元素太窄。然后,我不知道你是否希望你的东西有利润?另外,您遇到的错误是什么?你能通过 Web Developer 或 Firebug 看到它们是什么吗?
    【解决方案2】:

    我想我会在 isotope 的 github 页面上提请注意您的问题,因为当我遇到同样的问题时,这对我很有帮助:

    https://github.com/desandro/isotope/issues/222

    这似乎是一个错误,您需要将项目的宽度设置为 24.5%。这会带来一个差距问题(如果您要使用无缝网格),但至少应该可以帮助人们朝着正确的方向前进。

    【讨论】:

      猜你喜欢
      • 2013-01-25
      • 1970-01-01
      • 1970-01-01
      • 2016-02-10
      • 1970-01-01
      • 1970-01-01
      • 2013-03-20
      • 2019-11-11
      • 1970-01-01
      相关资源
      最近更新 更多