想要显示浮点网格

Question

使用Drupal视图输出我想使用float-span as described here

显示查询结果的平铺网格

请参阅sassmeister css源代码中的注释，以便更好地解释我想要实现的目标。

Play with this gist on SassMeister.

最值得赞赏的任何帮助。

Answer 1

你犯了三个错误。

1。奇点网格/装订线定义的语法错误

您使用了旧的Singularity 1.0语法：

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

自Singularity 1.2以来，正确的语法如下：

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

请参阅Creating Grids维基页面。

2。使用content-box框大小模型

在网格项上使用填充

默认情况下，浏览器使用content-box框大小调整模型。这意味着通过添加元素宽度，元素填充和元素边框来计算元素的最终宽度。

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

此问题有两种解决方案：

1. 不要在网格项目最外面的容器上使用填充和边框。如果需要填充和/或边框，请创建一个子容器：

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

2. 将大小调整模型切换为border-box。这是推荐的方法。通常会将border-box应用于页面上的所有元素。

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

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

   如您所见，它会将border-box应用于所有元素，并使所有图片和视频都有效。如果您不希望图像具有响应性，请考虑使用Compass中的box-sizing mixin或手动应用框大小调整。

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

大多数网格系统和Singularity都不例外，请遵循以下规则：如果行中有N个项目，则该行中的装订线数量将为N - 1。

换句话说，如果你想要连续4个项目，那么应该有4个项目和3个排水沟。奇点将计算这样的项目和装订线宽度，4个项目+ 3个排水沟导致100％宽度。

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

Singularity的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是一行中目标项的编号。由于我们定位的是每行中的最后一项，X等于Y。

结果

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

度过美好的一天！