0

我一直在学习使用表达式引擎。有一件事让我难住了。

我有一个使用四列网格的布局（请参阅http://training.customstudio.co.uk/services）。这使用了三个 CSS 类：一个用于列项目，一个用于最后一列项目，一个用于添加水平线的行。

我已经使用 EE 类开关来创建列和列最后类（请参阅http://training.customstudio.co.uk/portfolio），但我不知道如何让 EE 创建行类。我可以手动执行此操作，但希望页面是动态的，因此如果有 16 个项目，则每行下会有 4 行。

我使用的代码如下：

<div class="content-main">
                        <h1>Portfolio</h1>
                            {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                            <div class="{switch='col|col|col|col-last'}">
                                <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                                <p>{project_description}</p>
                            </div><!-- /end #col -->
                            {/exp:channel:entries}
                    </div>
<!-- /end #content-main -->

任何帮助将不胜感激！

提前致谢，

汤姆·帕金斯

4

2 回答 2

0

您也可以通过使用可以返回第 n 项的模运算符来完成此操作。（https://ellislab.com/blog/entry/the-modulus-operator）

<div class="content-main">
    <h1>Portfolio</h1>
        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
        {!-- Every 4th item add in a div with the class of row --}
        {if count == 1 OR count % 4 == 1}<div class="row">{/if}
        <div class="{switch='col|col|col|col-last'}">
            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
            <p>{project_description}</p>
        </div><!-- /end #col -->
        {if count % 5 == 0 OR count == total_results}</div>{/if}
        {/exp:channel:entries}
</div>
于 2015-04-09T10:21:58.660 回答
0

如果您将列 div 包装在每四次迭代包含一个“行”div 的 switch 语句中，您应该得到您正在寻找的内容：

                <div class="content-main">
                    <h1>Portfolio</h1>
                        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                        {switch='<div class="row">|||'}
                        <div class="{switch='col|col|col|col-last'}">
                            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                            <p>{project_description}</p>
                        </div><!-- /end #col -->
                        {switch='|||</div>'}
                        {/exp:channel:entries}
                </div>
于 2011-11-01T15:11:06.807 回答