Question

我正在使用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);
}

Answer 1

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

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

如果您使用的是split，inside或inside-static排水沟，那应该可行。否则，您需要某种方法来定位网格每一行中的last元素。 CSS无法定位nth-visible，因此这需要在markup / js中添加逻辑。每隔4个可见结果给出一个last类，您可以添加：

.last {
  @include last;
}