0

我的表达式引擎存在定位问题。单击此处在以下链接上,我正在循环元素,<div id="services-container">我注意到它在第一行上循环良好,但在第二行上开始错位。我已经尝试使用switch=""标签为每个循环创建一个单独的类,见下文:

{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
    <div id="services-container" class="{switch='1|2|3|4|5|6'}">
        <div class="service-content">
            <img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
            <p>{service_head_line}</p>
            {service_listed_items}
            <ul class="service-credentials">
                <li>{service_list_1}</li>
                <li>{service_list_2}</li>
                <li>{service_list_3}</li>
            </ul>

            <ul class="service-credentials">
                <li>{service_list_4}</li>
                <li>{service_list_5}</li>
                <li>{service_list_6}</li>
            </ul>
            <a href="#">View related projects &raquo;</a>
            {/service_listed_items}
        </div><!--service-content-->
    </div><!--SERVICES CONTAINER-->
    {/exp:channel:entries}

当我尝试在我的样式表中对这些类进行分类时,什么都没有发生。有谁知道我做错了什么?

4

1 回答 1

1

这涉及到 ExpressionEngine,但也涉及 css。基本上,您正在尝试创建一个每行包含 3 个项目的网格,对吗?

这些“行”中的每一个都必须采用浮动包含策略,因为它只包含 3 个浮动项目。我使用 switch 参数的方式:

{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
        {if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
                <div class="item">
                        ...code...          
                </div>
        {if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}

该代码将在该循环中每三个项目包含一个具有一类行的 div。

然后,如果你的项目是浮动的,你的行必须有某种浮动清除策略来包含它们,比如溢出:隐藏;或clearfix 方法

于 2012-11-25T13:37:07.140 回答