Susy 中的间距作为元素之间的间距保持不变。奖励:更宽的不起作用
Gutters in Susy remaining intact as spacing between elements. Bonus: wider doesn't work
susy 中的两个块之间有不需要的 space。尽管使用了 wide
功能,但它似乎完全遵循网格的大小。
$susy: (
columns: 9,
gutters: 0.454,
debug:(image: show,
output : overlay,)
)
;
#grid{
@include container(9);
@include background-grid;
gutter-width: 0.454;
}
#main_side_img{
@include span(1.75 wide of 9);
}
#main_heading_container{
@include span(4 of 9);
background-image: url(http://i.imgur.com/7Yxm5Sa.jpg);
}
上面的代码,#main_side_img
设置为 1.75
创建了这个:
所以我将 #main_side_img
的值设置为 2
令我沮丧的是,两个框之间的 space 保持不变,而排水沟只是移动了!
装订线保持不变,与我为 span 参数设置的值无关。
奖励:加宽不应该用来填充左右两侧的排水沟吗?它向右填充 2 个间距宽度。
将 no-gutters
关键字添加到您的宽跨度中。虽然 wide
告诉它向跨度宽度添加更多 space,但它不会自动删除装订线输出。
@include span(1.75 wide of 9 no-gutters);
susy 中的两个块之间有不需要的 space。尽管使用了 wide
功能,但它似乎完全遵循网格的大小。
$susy: (
columns: 9,
gutters: 0.454,
debug:(image: show,
output : overlay,)
)
;
#grid{
@include container(9);
@include background-grid;
gutter-width: 0.454;
}
#main_side_img{
@include span(1.75 wide of 9);
}
#main_heading_container{
@include span(4 of 9);
background-image: url(http://i.imgur.com/7Yxm5Sa.jpg);
}
上面的代码,#main_side_img
设置为 1.75
创建了这个:
所以我将 #main_side_img
的值设置为 2
令我沮丧的是,两个框之间的 space 保持不变,而排水沟只是移动了!
装订线保持不变,与我为 span 参数设置的值无关。
奖励:加宽不应该用来填充左右两侧的排水沟吗?它向右填充 2 个间距宽度。
将 no-gutters
关键字添加到您的宽跨度中。虽然 wide
告诉它向跨度宽度添加更多 space,但它不会自动删除装订线输出。
@include span(1.75 wide of 9 no-gutters);