0

インエクスプレッションエンジンにポジショニングの問題があります。ここをクリックしてください次のリンクで、要素をループし<div id="services-container">ていますが、最初の行では正常にループしているのに気づきましたが、2番目の行では位置がずれ始めています。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 つしか含まれていないため、フロート コンテインメント戦略を採用する必要があります。スイッチパラメーターを使用してそれを行う方法：

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

そのコードには、そのループ内の 3 つの項目ごとに行のクラスを持つ div が含まれます。

次に、アイテムがフロートされている場合、行には、overflow:hidden; のようなアイテムを含めるための何らかのフロート クリア戦略が必要です。またはclearfix メソッド。

于 2012-11-25T13:37:07.140 に答える