如何借助取模(%)运算符实现PHP读取的数据库记录3列水平展示

原有代码的核心问题 #

• 取模逻辑使用错位：仅用取模计算了11 % 3 = 2作为循环初始值，从未将取模运算用在“按列拆分、按行分组”的核心布局判断上，没有达到任务要求的取模使用场景
• 循环逻辑异常：初始值$i为2，while判断仅校验$i的真假值，每轮循环仅对$i做自增，没有做任何行/列的分组控制
• 表格结构不符合3列要求：每一条图书记录单独包裹在一个独立的<tr>行中，每个表格行仅包含1个<td>单元格，无论循环跑满多少条记录，最终都会渲染为垂直单列排布，无法实现3列水平并排的效果

符合任务要求的修正实现 #

核心逻辑强制使用%取模运算符完成布局判断：

• 维护图书遍历计数器$bookIndex，每读取一条图书记录计数器自增1
• 当计数器对固定列数取模结果为0时，判定为新一行的起始位置，开启<tr>标签
• 当计数器对固定列数取模结果为列数-1时，判定为当前行已经凑满3个单元格，闭合</tr>标签
• 遍历完成后，对最后不满3个单元格的尾行做标签补全，避免HTML结构错乱

<?php
include_once('config.php');
$result = mysqli_query($mysqli, "SELECT * FROM books ORDER BY id ASC");
// 定义固定列数
$columnCount = 3;
$bookIndex = 0; // 图书遍历计数器
?>

<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 200px;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-left: 10px;
}

.p3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-left: 10px;
color: blue;
}
/* 补充表格基础排版样式 */
table {
width: 100%;
border-spacing: 15px;
}
td {
width: 33%;
vertical-align: top;
}
</style>

<div class="container">
    <center>
        <h1>Koleksi Buku Peribadi</h1>
        <table>
            <?php
            while($book = mysqli_fetch_array($result)) {
                // 取模判断：到达新行起始位置，开启表格行
                if($bookIndex % $columnCount == 0) {
                    echo '<tr>';
                }
            ?>
                <td>
                    <img src="Gambar-buku/<?php echo $book['picture'];?>">
                    <p class='p2'>Penulis:<span class='p3'> <?php echo $book['author'];?> </span>
                    <br> <i><?php echo $book['category'];?></i>
                    </p> 
                    <center><button type="button">Details</button> </center>                                 
                </td>  
            <?php
                // 取模判断：当前行凑满3个单元格，闭合表格行
                if($bookIndex % $columnCount == $columnCount - 1) {
                    echo '</tr>';
                }
                $bookIndex++;
            }
            // 取模判断：最后一行不满3个单元格，补全闭合标签
            if($bookIndex % $columnCount != 0) {
                echo '</tr>';
            }
            ?>                         
        </table>
    </center>
</div>

实际效果验证 #

针对11条图书记录的场景，布局逻辑计算结果为：

• 前9条图书记录，每3条为一组生成3个满3列的表格行，实现水平并排效果
• 剩余2条图书记录放在最后一行，标签结构完整无错乱
• 所有布局分组判断均通过%取模运算符完成，完全符合任务硬性要求

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