html - thymeleaf ：在 3 列中显示 n 个项目

Question

如何使用 Thymeleaf 将列表中的 n 个项目显示为 3 列？

HTML 代码：

<section>
    <div class="sectionTitle">
        <h1>Key Skills</h1>
    </div>
        <div class="sectionContent" th:each="skill : ${userProfile.getUserSkills()}">
            <li th:text="${skill.getSkillName()}">[Skill Name]</li>
        </div>
    <div class="clear"></div>
</section>

标签： htmlcssspringspring-bootthymeleaf

Answer 1

找到了一个解决方案（可能不是完美的或最佳的，但它有效！）

<section>
    <div class="sectionTitle">
        <h1>Key Skills</h1>
    </div>

    <div class="sectionContent">
        <span th:each="i : ${#numbers.sequence(0, 2)}">
            <ul class="skills">
                <div th:each="skill, index : ${userProfile.getUserSkills()}"
                    th:unless="${(index.index-i) % 3}">
                    <li th:text="${skill.getSkillName()}">[Skill Name]</li>
                </div>
            </ul>
        </span>
    </div>
    
    <div class="clear"></div>
</section>

产生