Smarty 使用 CSS 创建网格/表格结构，无需额外的 HTML

Question

我有一个 HTML 格式的基本

列表，我想将其转换为 3 列网格。每个列表项都有一个固定的左浮动宽度，所以理想情况下我想：

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li class="clear">List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li class="clear">List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li class="clear">List 10</li>
</ul>

目前我已经尝试过这个：

<ul>
{foreach $submenu.child.items as $row} 
    <li class="{if $row@iteration is div by 4}clear{/if}"><a href="#">{$row.label}</a></li>
{/foreach}
</ul>

正如您在下面看到的，这与第一行分开。例如：

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li class="clear">List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li class="clear">List 8</li>
    <li>List 9</li>
    <li>List 10</li>
</ul>

更新： 我可以让它工作的唯一方法是添加额外的 HTML。还有其他办法吗？

<ul>
{foreach $submenu.child.items as $row} 
    <li><a href="">{$row.label}</a></li>
    {if $row@iteration % 3 == 0}<li class="clearBoth"></li>{/if}
{/foreach}
</ul>

Answer 1

你关心第一个条目是否有“clear”吗？

如果您不这样做，那么

 {if $row@iteration % 3 == 1}

如果您这样做，那么您将需要

 {if $row@iteration > 1 && $row@iteration % 3 == 1}

（或 Smarty 中的任何语法）。

如果您能解释一下这个问题，即它与计数有关，与 HTML 或 Smarty 无关，那就更有帮助了。