使用 foreach 循环后产品卡片垂直显示 - PHP

如何解决使用 foreach 循环后产品卡片垂直显示 - PHP

所以我正在做一个项目，该项目要求我使用 foreach 循环在数据库中显示产品。问题是它们垂直堆叠，当我尝试将 div class=game 移到 foreach 循环之外时，它以一种奇怪的方式显示卡片。请帮忙。

这是我在这里的第一个问题。谢谢。

<?PHP 

$product_shuffle = $product->getData();?>
    <section id="special-price">
        <div class="container">
            <h4 class="font-rubik font-size-20">Snacks</h4>
                <div id="filters" class="button-group text-right">
                    <button class="btn is-checked" data-filter="*">All Snacks</button>
                    <button class="btn" data-filter=".Liquid">Liquid</button>
                    <button class="btn" data-filter=".solid">Solid</button>
                    <button class="btn" data-filter=".Licks">Licks</button>
                </div><br><br>
            
              
            
            <?PHP foreach ($product_shuffle as $item) {?>
            <div class="game">
        <div class="rank text-warning"><span><i class="fas fa-shopping-bag"></i></span></div>
        <div class="grid-items<?PHP echo $item["productcat"];?>">
            <div class="front">
            <img class="thumbnail" src="<?PHP echo $item['productimage'] ??"./uploads/snack1.jpg"; ?>" alt="product1">
            <form method="post" action="index.PHP?action=add&id=<?PHP echo $item["id"] ?>">
            <h3 class="name"><?PHP echo $item['productname'] ??"UnkNown"; ?></h3>
            <input type="number" name="quantity" class="quant" value="1" min="1">
            <div class="stats">
                <p class="viewers"><span>$</span><?PHP echo $item['productprice'] ??'0'; ?></p>
                <div class="rating text-warning font-size-14">
                    <span><i class="fas fa-star"></i></span>
                    <span><i class="fas fa-star"></i></span>
                    <span><i class="fas fa-star"></i></span>
                    <span><i class="fas fa-star"></i></span>
                    <span><i class="far fa-star"></i></span>
                </div>
            </div>
        </div>
        <input type="hidden" name="hidden_image" value="<?PHP echo $item["productimage"]; ?>">
        <input type="hidden" name="hidden_name" value="<?PHP echo $item["productname"]; ?>">
        <input type="hidden" name="hidden_price" value="<?PHP echo $item["productprice"]; ?>">
        <div class="back">
            <div class="streaming-info">
                <p class="game-stat">824 Purchases</p>
                <p class="game-stat">1.1K Wishlist</p>
            </div>
            <form method="post">
            <button class="btncart" type="submit" name="addproduct">Add to Cart</button>
            </form>
            
        </div>
        <div class="background">

        </div>
        </div>
            
    </div><br><br>
    <?PHP }?>
    </div>
    </section>

解决方法

我找到了问题的解决方案。除了将游戏 div 标签移出 foreachloop 之外，我的用于产品过滤的 javascript 同位素插件中还有一个拼写错误，它以“奇怪”的方式不断地弄乱卡片。卡片现在水平显示。谢谢。