0

我正在使用 Susy 的图库工具以网格格式显示元素。Angular 会根据用户的选择即时隐藏或显示这些网格元素。当 Angular 在网格中隐藏一个元素时，它会为它附加一个类ng-hide。这反过来将其 CSS 设置为display:none !important.

问题是 Susy 正在计算每个元素的位置，而不考虑设置的项目display:none- 当这些元素被隐藏时，它会在网格中留下空隙。

是否有可能让 Susy在布置隐藏元素时忽略它们？

我试过使用:not()CSS 选择器，但没有成功 - 布局中仍然存在差距：

.results__result:not(.ng-hide) {
    @include gallery(3 of 12);
}
4

1 回答 1

1

Sass 对 DOM 一无所知，所以 Susy 也不知道。要创建画廊布局，susy 必须依赖nth-child选择器——这对于您正在谈论的用例来说效果不佳。开始简单：

.results__result {
  @include span(3 of 12);
}

如果您正在使用split,inside或inside-staticgutters - 那应该可以工作。否则，您需要某种方法来定位last网格每一行中的元素。CSS 没有办法定位 nth-visible，因此这需要在您的标记/js 中添加逻辑。给定last每 4 个可见结果的类，您可以添加：

.last {
  @include last;
}
于 2014-12-04T00:37:27.693 回答