表达引擎和CSS

发布于 2024-10-17 03:07:46 字数 1200 浏览 0 评论 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 -->

任何帮助将非常感激！

提前致谢，

汤姆·帕金斯

原文

I’ve been learning using Expression Engine. One thing has me stumpted though.

I have a layout that uses a four column grid (see http://training.customstudio.co.uk/services). This uses three CSS classes: one for the column item, one for the last column item, and one for the row to add the horizontal rule.

I’ve used the EE class switch to create the column and column last classes, (see http://training.customstudio.co.uk/portfolio) but I can’t figure out how to get EE to create the row class. I could do this manually, but want the page to be dynamic so if there are 16 items, there will be 4 rows with lines under each.

The code I’ve used is as follows:

<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 -->

Any help will be very much appreciated!

Thanks in advance,

Tom Perkins

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风不识月 2024-10-24 03:07:46

如果您将列 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>

If you wrap your column divs in switch statements that contains a 'row' div every four iterations, you should get what you're looking for:

                <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>

回复收藏 0 原文

蓦然回首 2024-10-24 03:07:46

您还可以通过使用可返回第 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>

You can also accomplish this by using the modulus operator which can return the nth item. (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>

回复收藏 0 原文

~没有更多了~