想要显示浮动跨度网格

你犯了三个错误。

1.奇点网格/沟槽定义语法错误

您使用了旧的奇点1.0语法:

$grids: 12;
$gutters: 1/3;

从奇点1.2开始,正确的语法如下:

@include add-grid(12);
@include add-gutter(1/3);

请参见 Creating Grids wiki页面。

2.使用 content-box 箱体尺寸模型

默认情况下,浏览器使用 内容框 箱体尺寸模型。这意味着通过添加元素宽度、元素填充和元素边框来计算元素的结果宽度。

奇点跨越网格项,使它们占据容器宽度的100%。一旦将填充和宽度应用于网格项,生成的宽度将超过100%,一行中的最后一个网格项将下降到下一行。

这个问题有两种解决方案:

1. 不要在网格项最外层容器上使用填充和边框。如果需要填充和/或边框,请创建子容器:

   <div class="tile">
     <div class="tile-border-padding">item one</div>
   </div>
   

2. 将箱子尺寸模型切换到 border-box 。这是推荐的方法。通常应用 边框框 到 全部的 页面上的元素。

   最简单的方法是安装 Toolkit Sass库并导入其 kickstart 单元本模块应用以下CSS:

   *, *:before, *:after {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   
   img, video {
     max-width: 100%;
     height: auto;
   }
   

   正如你所看到的,它同时适用于 边框框 并使所有图像和视频响应。如果您不希望图像具有响应性,请考虑使用 box-sizing 从Compass混合或简单地手动应用框大小。

3.忘记正确跨越每行中的最后一项

大多数网格系统都遵循这一规则,奇点也不例外: N 则该行中的檐槽数将为 N - 1 .

换句话说,如果你想要一行4个项目,那么应该有4个项目和3个槽。奇点将计算4个项目+3个天沟的项目和天沟宽度,从而得到100%的宽度。

|                                                   |
 [ITEM][gutter] [ITEM][gutter] [ITEM][gutter] [ITEM]

奇点 float-span(3) mixin将右槽应用于元素。所以当你这样做的时候

.tile { @include float-span(3); }

最后,一行中有4个项目+4个槽,结果宽度将超过容器的100%,行中最后一个项目及其槽将下降到下一行。

|                                                   |
 [ITEM][gutter] [ITEM][gutter] [ITEM][gutter] [ITEM][gutter]

解决方案是明确告诉Singularity,每一行中的最后一项都应该没有槽:

.tile {
  @include float-span(3);

  &:nth-child(4n+4) {
    @include float-span(3, last);
  }
}

我们正在使用 :nth-child(Xn + Y) 这里是伪类。 X 是每行中的项目数,以及 Y 是一行中目标项的编号。当我们瞄准每一行中的最后一项时, 十、 等于 Y .

后果

以下是解决了所有这些问题的演示: http://sassmeister.com/gist/5b6f0dbe99c7129a8ef6

祝您有个美好的一天!