javascript - ExpressionEngine cms 中的定位问题

Question

我的 in 表达式引擎存在定位问题。 click Here在以下链接中，我使用 <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}

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

Answer 1

这涉及到ExpressionEngine，也涉及到css。基本上，您正在尝试创建一个每行包含 3 个元素的网格，对吗？

这些“行”中的每一个都必须采用 float 包含策略，因为它只包含 3 个 float 项。我使用 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，在该循环中每三个元素包含一类行。

然后，如果你的元素是 float 的，你的行必须有某种 float 清除策略来包含它们，比如 overflow:hidden;或 clearfix method .