Question

有一件事我还没有用Singularity完成。目前，我尝试从浮动切换到隔离输出样式，并使用网格和隔离跨度。但有一种模式我无法重现。不确定是否有更优雅的方式。对于浮点输出，我到目前为止使用了以下设置，例如

<div class="floater">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';

.floater div
{
  background-color:red;
  height:10em;
  @include float-span(4);
  &:nth-child(4n) {
      @include float-span(4, 'last');
  }
}

导致4个盒子，宽度相同，彼此相邻排列。但是如何使用隔离跨度/隔离输出完成相同的操作。如果我试试

<div class="isolator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';

.isolator div
{
  background-blue;
  height:10em;
  @include isolation-span(4, 1, 'right', $gutter: .25);
  &:nth-child(4n) {
        @include isolation-span(4, 13, 'right', $gutter: .25);
  }
}

我是否必须为每个“列”写一个n-child和一个隔离范围包含（cuz与浮动示例中的nth-child只显示第一个和最后一个框）？或者有一个更短的方式，如上面的浮动示例？最好的问候拉尔夫

Answer 1

你需要写出每个项目。 isolation输出方法谨慎地将项放入网格上的列位置。从技术上讲，使用float输出方法执行的操作实际上是组合float和symmetric网格中出现的快乐奇点的副产品，如果更改其中任何一个变量，则会发生变化。

这里发生的事情是，对称的网格恰好如此，因为每个项目的宽度相同，您可以将一列替换为另一列。使用float时，您所放置的每个列都会与该项左对齐（对于ltr）。这两个属性相结合，允许您始终在span中定义float始终从第1列开始，但是它可以显示在任何位置，因为您可以在对称网格中交换列。然后，您可以利用它将它们堆叠在一起。这种行为实际上是float输出样式的心智模型和isolation输出样式的心理模型之间的核心差异（如上所述，谨慎地将项目置于栏位）。

如何使用隔离跨度定义一行中宽度相同的元素

1 个答案: