无法让Susy网格正常工作

我要疯了！不知道我在做什么错，它只是将不会工作。这是我的代码：无法让Susy网格正常工作

@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; 
}

至于我可以告诉它的计算错了，这是某种错误的？这里是一张当前呈现给我的图片。

enter image description here

为什么会出现这种情况？（我试过使用css重置，没有修复它）

来源

2015-07-19 davegri

你可以把你的代码放在一个小提琴？我有一种感觉，你的html中可能有一个未封闭的标签。 – ramesh

你看过编译过的CSS来验证它是否产生了你期望的结果（你甚至知道你期待的结果是什么？）？ – cimmanon

如果您指出了您希望达到的目标，那将会更容易。但我猜这个问题只是每行下一行的最后一个元素。这是因为（与许多网格系统一样），默认设置使用边距进行排水沟处理，并且您需要移除最后的排水沟才能正确安装。你可以用last关键字来做到这一点。

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

为您导航，因为你有很多兄弟姐妹的大小相同，你也许想用gallery混入作为快捷方式来处理，对你：

li{ 
    @include gallery(3); 
}

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

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

来源

2015-07-22 19:55:19

flow: rtl

这就是为什么你的代码对齐的权利。

为什么你需要@include span（24）;对于导航？替换这个包括。

其他一切正常。

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

来源

2015-07-21 13:37:40 Serhey

无法让Susy网格正常工作

回答

相关问题