无法使Susy网格正常工作

Question

我疯了！不知道我做错了什么，它只是赢了工作.. 这是我的代码：

@import "susy";

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
);


.wrapper{
    @include container(70em);
}

header{
    background-color:red;
    height:200px;
}

nav{
    @include span(24);
    ul{
        li{
            background-color:orange;
            @include span(3);
        }
    }
}

.block{
    @include span(12 of 24);
    background-color:blue;
}

.ad{
    @include span(12 of 24);
    height:300px;
    background-color:green;
}

据我所知，它的计算错误，这是某种错误吗？ 这是一张目前为我呈现的图片。

为什么会这样？ （我已尝试使用css重置，没有修复它）

Answer 1

flow: rtl

这就是您的代码正确对齐的原因。

为什么需要@include span（24）;导航？替换此包含。

其他一切正常。

＆＃34;正确＆＃34;在你的问题中如何？

Answer 2

如果您指出了您希望实现的目标，那么帮助会更容易。但我猜这个问题只是每行下一行的最后一个元素。这是因为（与许多网格系统一样）默认设置使用了水槽边距，你需要移除最后的装订线以确保一切正确。您可以使用last关键字来执行此操作。

.ad{
    @include span(last 12);
}

对于您的导航，由于您有许多相同大小的兄弟姐妹，您可能希望使用gallery mixin作为快捷方式为您处理：

li{
    @include gallery(3);
}

另一个解决方案是使用split或inside排水沟，不需要任何移除：

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
  gutter-position: split,
);