Question

我想用Susy 2制作一个简单的3列/ 3行网格，如：

 1   2   3
 4   5   6
 7   8   9

但这些街区漂浮在一个越野车和异教徒的秩序中。你可以看看： http://img.spheerys.fr/images/2015/01/05/bug-susy.jpg

这是我的HTML标记：

<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<article class="block">5</article>
<article class="block">6</article>
<article class="block">7</article>
<article class="block">8</article>
<article class="block">9</article>

这是我的Susy地图：

$susy: (
  global-box-sizing: border-box,
  use-custom: (
    rem: true
  ),
  columns: 12,
  column-width: 4em,
  gutters: 1/4
);

最后，我的Sass：

.block
  +span(4 of 12)
  &:nth-child(3n)
    +last
    +break

出了什么问题？

Answer 1

:nth-child计算所有兄弟元素。因此，:nth-child(3n)并不适用于每个第3 .block，它适用于也 .block的每个第3个兄弟。使用:nth-child时的最佳解决方案是将所有列表项包装在自己的父项中，而不包含其他兄弟项。

Susy还提供了创建此类图库布局的快捷方式......

HTML：

<!-- wrap all your blocks in a div -->
<div>
  <article class="block">1</article>
  <article class="block">2</article>
  <article class="block">3</article>
  <article class="block">4</article>
  <!-- more blocks... -->
</div>

SASS：

.block
  +gallery(4 of 12)

这应该是你所需要的一切。

3列网格上的异端顺序/处置

1 个答案: