0

使用 Drupal 视图输出，我想使用浮动跨度显示查询结果的平铺网格，如此处所述

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

在 SassMeister 上玩这个要点。

非常感谢任何帮助。

4

1 回答 1

1

你犯了三个错误。

1. Singularity grid/gutter 定义的语法错误

您使用了旧的 Singularity 1.0 语法：

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

从 Singularity 1.2 开始，正确的语法如下：

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

请参阅创建网格wiki 页面。

content-box2. 使用盒子尺寸模型对网格项目使用填充

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

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

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

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

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

  2. 将 box-sizing 模型切换为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 或简单地手动应用 box-sizing。

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

大多数网格系统，Singularity 也不例外，遵循这条规则：如果行中有N项目，则该行中的排水沟数将为N - 1.

换句话说，如果您想要连续 4 个项目，则应该有 4 个项目和 3 个装订线。Singularity 将计算这样的项目和装订线宽度，即 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

祝你今天过得愉快！

于 2014-07-28T10:43:42.403 回答