仅为for循环中的第一行更改列布局

Question

我有一个包含视频/图像内容的网页，我在每行显示四个。

我想将第一行作为具有不同列配置的特色部分，如下所示。

因此，这个特殊行将有3列，第一列的大小更大。

以下是我目前所拥有的内容，<figure>代表一行， <ul> <li> <% Object.keys(data).forEach(function(key) { %> <% if (key%4 == 0 && key != 0) { %> </li><li> <% } %> <figure> ... </figure> <% }) %> </ul> 代表一列。

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()       // This is the default repo
        mavenCentral()  // This is the Maven Central repo
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.0'
        classpath 'com.google.gms:google-services:1.5.0-beta2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()       // This is the default repo
        mavenCentral()  // This is the Maven Central repo
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

我无法理解在循环中添加这个条件。

Answer 1

假设您正确设置了CSS，以便<figure>类featured元素获得正确的双倍宽度

<ul>
    <li>
    <% Object.keys(data).forEach(function(key) { %>
        <% if ((key + 1)%4 == 0) { %>
            </li><li>
        <% } %>
        <figure <% if (key == 0) { %> class="featured" <% } %> >

          ...

        </figure>
    <% }) %>
    </li>
</ul>