SASS

Question

我正在尝试使用CSS来计算每个5 + 1元素添加的顶部高度。

以下代码将一系列绝对定位元素移动到各自的位置。

    .screen [data-app]:nth-child(5n-4) { left:0%; }
    .screen [data-app]:nth-child(5n-3) { left:20%; }
    .screen [data-app]:nth-child(5n-2) { left:40%; }
    .screen [data-app]:nth-child(5n-1) { left:60%; }
    .screen [data-app]:nth-child(5n) { left:80%; }

这会产生五列具有绝对定位元素的错觉。现在我要做的是为下一行中的五行添加top:180px，以及top:360px之后的行...等等。

这可以在不需要为每个元素的位置编写CSS代码的情况下完成。根据当前元素的n值为每个五个组应用top属性的某种方法。

Answer 1

您可以使用SASS或Flexbox来获得您正在寻找的结果。在这种情况下，SASS将创建一个比理想更臃肿的CSS文件，但将使用您提出的规则，而Flexbox将更加面向未来并且易于维护。

HTML

<div class="screen">
    <div data-app>asdf1</div>
    <div data-app>asdf2</div>
    <div data-app>asdf3</div>
    <div data-app>asdf4</div>
    <div data-app>asdf5</div>
    <div data-app>asdf6</div>
    <div data-app>asdf7</div>
    <div data-app>asdf8</div>
    <div data-app>asdf9</div>
    <div data-app>asdf10</div>
    <div data-app>asdf11</div>
</div>

SASS

.screen {
    position: relative;
}
.screen [data-app] {
    $height: 180px;
    $offset: 20%;
    $blocks_per_row: 5;

    position: absolute;
    width: 20%;

    @for $i from 0 through 20 {
        $y: floor($i / $blocks_per_row);
        $x: $i % 5;

        &:nth-child(#{$y}n+#{$i}) {
            left: $x * $offset;
            top: $y * $height;
        }
    }
}

Flexbox的

.screen {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.screen [data-app] {
    flex: 0 1 20%;
    height: 180px;
}

如您所见，Flexbox解决方案没有上限，而且非常干净。我希望这些解决方案能为您提供帮助。

CSS Nth Child根据N计算顶部高度

1 个答案:

HTML

SASS

Flexbox的