无法让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;
}
至于我可以告诉它的计算错了,这是某种错误的? 这里是一张当前呈现给我的图片。
为什么会出现这种情况? (我试过使用css重置,没有修复它)
答
如果您指出了您希望达到的目标,那将会更容易。但我猜这个问题只是每行下一行的最后一个元素。这是因为(与许多网格系统一样),默认设置使用边距进行排水沟处理,并且您需要移除最后的排水沟才能正确安装。你可以用last
关键字来做到这一点。
.ad{
@include span(last 12);
}
为您导航,因为你有很多兄弟姐妹的大小相同,你也许想用gallery
混入作为快捷方式来处理,对你:
li{
@include gallery(3);
}
另一种解决方案是使用split
或inside
排水沟,不需要任何去除:
$susy: (
flow: rtl,
columns: 24,
gutters: .25,
gutter-position: split,
);
答
flow: rtl
这就是为什么你的代码对齐的权利。
为什么你需要@include span(24);对于导航?替换这个包括。
其他一切正常。
而且“正确地”在你的问题中如何?
你可以把你的代码放在一个小提琴?我有一种感觉,你的html中可能有一个未封闭的标签。 – ramesh
你看过编译过的CSS来验证它是否产生了你期望的结果(你甚至知道你期待的结果是什么?)? – cimmanon