Question

我在HTML中有一个基本的<ul>列表，我希望将其转换为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>

如下所示，这与第一行不同。 E.G：

<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

您是否关心第一个条目是否“清除”？

如果你不这样做，那么

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

如果你这样做，那么你需要

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

（或Smarty中的任何语法）。

如果您已经解释了问题，那将会更有帮助，即它是关于计数，而不是与HTML或Smarty有关。

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

1 个答案: