如何在具有隔离跨度的行中定义宽度相同的元素

Question

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

<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个子项和一个隔离跨度include(因为浮点示例中的第n个子项只显示第一个和最后一个框)？或者有没有像上面的float示例那样的更短的方法？向Ralf 致以最良好的问候

Answer 1

您需要写出每一项。isolation输出方法谨慎地将一个项放置到网格上的列位置。从技术上讲，你用float输出方法所做的实际上是快乐奇点的副产品，快乐奇点发生在float和symmetric组合网格中，如果你改变这两个变量中的任何一个，它都会改变。

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