數組反轉時，幾個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的位置，以便將最后一個位置的div放到第一個位置（ STEVE DAVID • SITE將排在最前面，而ZELDA-BOSS • SITE將排在最后）。

所以我自然而然地走了：

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

但是一旦完成，布局就會被一個div破壞，該div會移動一個塊，並使其他塊也移動一個，然后在布局中間留一個空白：

會有人對發生的事情有絲毫的想法，並願意幫助我嗎？

Answer 1

如果您稍微靠近一點，您會發現STEVE DAVID的框比其他框高1px 。 這個1px破壞了您的浮動網格。 嘗試使用CSS清除4th元素上的浮點數。

就像這樣：

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