为什么我的奇点网格中的浮点数没有填满所有列？

Question

这是SassMeister。这是一个带有浮动菜单项的四列子布局，我希望它们填充列，但由于页边空白太大，它们会聚集在前三列。

http://sassmeister.com/gist/b45986bb5bcbc464b3aa

对为什么会发生这种情况有什么见解吗？

Answer 1

哇，这是一些混乱的Drupal标记！你应该把它清理干净，并发布一个简化的问题演示，而不是只是复制粘贴所有的混乱。

除非将第二个参数指定为'last'或最后一列的编号，否则float-span mixin会为项设置右边距。

失败的原因是网格中有4列和3个檐沟，但您告诉Singularity每行生成4个单列项目，每个项目都有一个檐沟。最后一个项目放不下，被包装到下一行。

解决方案是将'last'应用于每四个项目：

.menu-block-1  .leaf {
  @include float-span(1);
  &:nth-child(4n+4) {
    @include float-span(1, 'last');
  }
}

演示：http://sassmeister.com/gist/5723f9c604752802af05