当阵列反转时，几个div移开，从而打破了布局

Question

所以我使用这个PHP数组来存储构建一个看起来像这样的简单HTML结构所需的信息：

{% for key, realisation in realisations %}
    <div class="{{ realisation.thumbnail.category }} col-md-4 item">
        <div class="grid">
            <figure class="effect-oscar">
                <img src="images/realisations/{{ realisation.thumbnail.image }}" alt="" />
                <figcaption>
                    <p>
                      <span>
                        {{ realisation.thumbnail.name }} &bull; {{ realisation.thumbnail.type }}
                      </span>
                    </p>
                    <a href="#" class="smooth-redirect" data-rea="{{ key }}"></a>
                </figcaption>
            </figure>
        </div>
    </div>
{% endfor %}

{{ realisations }}是我传递给Twig视图的变量：

return $this->render('views/partials/realisations.html.twig', [
    'realisations' => $realisations,
]);

一切进展顺利，div很好地按照屏幕截图进入了位置：

但是，我想要反转div的位置，以便将最后一个位置的位置放到第一个位置（STEVE DAVID • SITE将是第一个，ZELDA-BOSS • SITE将是最后一个位置）

所以我自然而然地走过：

return $this->render('views/partials/realisations.html.twig', [
    'realisations' => array_reverse($realisations), // use array_reverse()
]);

但是一旦完成，布局被一个div打破，一个块移位并使其他一个移位，然后在布局的中间留下一个空白区域：

对于发生的事情，我是否会有任何想法，并愿意帮助我？

Answer 1

如果你仔细观察，你会发现STEVE DAVID的框比其他框高1px。这个1px打破了浮动网格。尝试使用CSS清除每个4th元素上的浮点数。

这将是：

.item:nth-child(4n+4) {}