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

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 将更加面向未来且易于维护。

超文本标记语言

<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>

萨斯

.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;
        }
    }
}

弹性盒

.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 解决方案没有上限，而且非常干净。我希望这些解决方案对您有所帮助。