Question

我试图将数据分成2列。

我想有这样的结构：

<div class="accordion">
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

将.accordion__item div块分成2列.accordion__list

为此我用TWIG写了这个：

<div class="accordion">
    <div class="accordion__list">
        {% for liste in bloc.listes[:(bloc.listes|length / 2)|round(0, 'floor')] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="accordion__list">
        {% for liste in bloc.listes[(bloc.listes|length / 2)|round(0, 'floor'):] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

但那不起作用。每次我将偶数编号放入我的2列，而我列表中的最后一项替换最后一列中的最后一项。

这是我的问题的一个例子

我想有这个：

Answer 1

为什么不直接将集合循环两次？这种方式更容易，

{% set items = ['item1', 'item2', 'item3', 'item4', 'item5', ] %}

<div class="half">
{% for item in items %}
    {% if not loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>
<div class="half">
{% for item in items %}
    {% if loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>

Answer 2

我会用css而不是木材来解决它。只需将其列为使用宽度为50％的内联块的列表。

. accordion {
    position: relative;
}
. accordion__list {
    display: inline-block;
}

或者这太简单了？

Answer 3

不要使用两个循环，您可以考虑性能...

  {% set firstHalf = "" %}
    {% set secondHalf = "" %}

    {% for item in items %}
        {% if loop.index is odd %}
           {% set firstHalf %}{{ firstHalf }} <div >{{ item }}</div> {% endset %}
        {% else %}
           {% set secondHalf %}{{ secondHalf }} <div >{{ item }}</div> {% endset %}
        {% endif %}
    {% endfor %}

    <div>
       {{ firstHalf }}
    </div>
    <div>
       {{ secondHalf }}
    </div>

使用Twig将数据分成2列列表

3 个答案: