我有一个名为 .container
的 14 列网格。我试图将 4 个具有类 .block
的 div 置于 .container
中,其中每个 .block
跨越 3 列。
我想通过向 .block
添加一个定位规则而不是向每个 .block
添加隔离样式来实现这一点。
根据我对 Singularitygs 的理解,我应该使用输出风格的 float 来定位多个具有相同类的相对于彼此的 div。
理想情况下,我可以使用 @include grid-span(3, 2, $output-style: 'float');
其中位置为 2,但位置似乎无效。根据文档,位置是可选的。但这是否意味着它被忽略了? https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#float-span
如果位置对 grid-span(3, 2, $output-style: 'float');
无效,有没有人知道一个简单而优雅的替代解决方案?我想避免在 DOM 中生成额外的元素或定位每个单独的 .block
元素。
我在这里创建了一个关于 sassmeister 的要点: http://sassmeister.com/gist/5e92b58e8bb2a206a228
这里是我使用的代码摘要:
HTML
<div class='container'>
<div class='block'> </div>
<div class='block'> </div>
<div class='block'> </div>
<div class='block'> </div>
</div>
CSS
@include add-grid(14);
.container {
height: 100px;
width: 100%;
}
.block {
@include grid-span(3, 2, $output-style: 'float');
height: 25px;
}
提前感谢您的想法!
最佳答案
一个解决方案是添加一个网格跨度百分比(列 + 间距)作为第一个 .block
的左边距。
可以通过 Singularity API 公开的 grid-span 函数检索此值。具体来说,它返回“等于给定跨度和位置处的列跨度加上间距跨度的百分比”。 https://github.com/at-import/Singularity/wiki/Grid-Helpers
在上面的例子中,因为我们想要在 4 个 .block
的每一侧有 1 列加上 gutter 的空间,我们使用
.block:first-of-type {
margin-left: grid-span(1, 1);
}
这是一个更新的要点,显示了使用这种方法居中的 div:http://sassmeister.com/gist/27e13cc4ae586f2f885f
关于css - Singularitygs - 使用网格跨度位置和输出样式居中 div 'float',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29217236/