PHP读取数据库数据时页面整体重复的技术问题求助

你的核心问题是把包含页面标题的整个外层容器放在了while循环内部，导致每读取一条数据库记录，就会重复输出一次标题和外层结构，最终页面被多次拆分。要实现商品页面那样的并排展示，需要调整HTML结构的层级：

错误原因 #

原代码中，main-container（包含标题）和post-main-container（网格容器）都在while循环里，每循环一次就会生成一套完整的标题+容器结构，自然会重复页面内容。

修正后的代码 #

将外层容器和标题移到循环外部，只把单个志愿卡片的代码留在循环内：

<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>

<!-- 外层容器和标题放在循环外面，只渲染一次 -->
<div class="main-container">
    <h2>تصفح الفرص التطوعية </h2>
    <div class="post-collect">
        <div class="post-main-container">
            <?php
            while ($row = mysqli_fetch_assoc($allopp)) {
            ?>
                <!-- 单个志愿卡片，循环生成 -->
                <div class="all sports">
                    <div class="post-img">
                        <img src="imgs/<?php echo $row["images"]; ?>">
                        <span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
                    </div>
                    <div class="post-content">
                        <div class="post-content-top">
                            <span>
                                <i class="fa-solid fa-users-line"></i><?php echo  $row["volunteer_num"]; ?>
                            </span>
                            <span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
                        </div>
                        <h2>"<?php echo $row["Title"]; ?>"</h2>
                        <p>"<?php echo $row["Description"]; ?>"</p>
                    </div>
                    <div class="button-btn">
                        <a href="#">التفاصيل والتسجيل</a>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>
    </div>
</div>         
</body>

额外优化提示 #

• 你的CSS中post-main-container已经设置了grid-template-columns: repeat(4, 1fr)，修正结构后卡片会自动按4列并排展示。
• 注意post-img的宽度设置（width: 2vw）可能过小，建议调整为更合理的数值，比如width: 100%，避免图片显示异常。

内容的提问来源于stack exchange，提问作者deodandy