Question

我试图创建一个列表项网格，我有10个项目，并希望将它们绝对定位在2个集合中。我可以使用模数设置左侧位置，但我踩到了如何增加最高位置，因此每行额外增加20％。有人可以建议我需要做什么吗？我尝试添加一行和顶值计数器，但我认为我的逻辑搞砸了。目前所有最高值都设置为0，是因为我没有将$topValue设置为百分比，还是我搞砸了？

SASS

$total: 10;
$inc: 0;

    @for $i from 1 through $total {
        $rowCount: 0;
        $topValue: 0;
        li:nth-child(#{$i}) {

            top: $topValue;

            $rowCount: $rowCount + $rowCount;

            @if $rowCount >= 2 {
                $rowCount: 0;
                $topValue: $topValue + 20;
            }

            @if $i % 2 == 0 {
              left: 50%;
            } @else {
              left: 0;
            }
        }


    }

笔：http://codepen.io/styler/pen/IAkzy SASS：http://sassmeister.com/gist/a5ee97397eb2a0609ca1

Answer 1

$total: 10;
$inc: 0;
$rowCount: 0;

@for $i from 1 through $total {
  li:nth-child(#{$i}) {
    @if $i % 2 == 0 {
      left: 50%;
    } @else {
      $rowCount: $rowCount + 1;
      left: 0;
    }
    top: ($rowCount - 1) * 20%;
  }
}

小提琴：http://codepen.io/anon/pen/umojy

SASS for循环创建列表项网格，在增加行时出现问题

1 个答案: