无法让 Susy 网格正常工作答案

【问题标题】：Cannot get Susy grid to work properly无法让 Susy 网格正常工作
【发布时间】：2015-07-19 01:06:38
【问题描述】：

我要疯了！不知道我做错了什么，它只是行不通.. 这是我的代码：

@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 重置，没有修复它）

【问题讨论】：

你能把你的代码扔在小提琴上吗？我感觉你的 html 中可能有一个未闭合的标签。
您是否查看了编译后的 CSS 以验证它是否产生了您所期望的结果（您是否甚至知道您所期望的结果是什么？）？跨度>

标签： css sass susy susy-sass

【解决方案1】：

如果您指出您希望实现的目标，那么提供帮助会容易得多。但我猜问题只是每一行的最后一个元素下降到下一行。这是因为（与许多网格系统一样）默认设置使用边距作为装订线，您需要删除最终装订线以使所有内容都适合。您可以使用 last 关键字来做到这一点。

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

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

li{
    @include gallery(3);
}

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

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

【讨论】：

【解决方案2】：

flow: rtl

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

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

其他一切正常。

在你的问题中“正确地”如何？

【讨论】：