本文详细讲解如何结合 php 的 `foreach` 循环和 w3.css 响应式网格系统，实现数据在多行三列布局中的动态展示。通过巧妙运用取模运算符，我们能够精确控制每行显示的项目数量，避免常见的布局问题，从而构建出结构清晰、响应迅速的数据列表。
动态构建 W3.CSS 响应式多行网格布局
在前端开发中，我们经常需要从数据库或其他数据源获取数据，并将其以结构化的网格形式展示在页面上。当使用 PHP foreach 循环结合 W3.CSS 这样的响应式框架时，一个常见的挑战是如何将数据准确地分布到固定列数（例如三列）的多行布局中，而不是将所有项目堆叠在一行或生成错误的嵌套结构。
例如，如果直接在 foreach 循环内部简单地包裹 w3-row，可能会导致每个项目都独占一行，或者创建不必要的嵌套行：
<?php foreach ($products as $product) : ?>
<div class="w3-row">
<div class="w3-third w3-container">
<h2><?php echo htmlspecialchars($product['name']); ?></h2>
</div>
</div>
<?php endforeach; ?>上述代码的预期结果是每个产品都单独占据一行，而不是我们期望的三列布局。
解决方案：利用取模运算符控制行布局
要实现每行固定数量（例如三列）的布局，关键在于精确控制 w3-row 容器的开启和关闭时机。我们可以利用 PHP 的取模运算符 (%) 来判断当前循环迭代是否是新行的开始或旧行的结束。
立即学习“PHP免费学习笔记（深入）”；
核心思路：
- 在每行的第一个元素（即 index % itemsPerRow === 0）之前，开启一个新的 w3-row 容器。
- 在每行的最后一个元素（即 (index + 1) % itemsPerRow === 0）之后，或者当循环结束且当前行未满时，关闭当前的 w3-row 容器。
下面是实现这一逻辑的 PHP 代码示例：
<?php
// 示例数据：从数据库获取的产品列表
$products = [
['id' => 1, 'name' => '产品 1 - 数据库数据'],
['id' => 2, 'name' => '产品 2 - 数据库数据'],
['id' => 3, 'name' => '产品 3 - 数据库数据'],
['id' => 4, 'name' => '产品 4 - 数据库数据'],
['id' => 5, 'name' => '产品 5 - 数据库数据'],
['id' => 6, 'name' => '产品 6 - 数据库数据'],
['id' => 7, 'name' => '产品 7 - 数据库数据'],
['id' => 8, 'name' => '产品 8 - 数据库数据'],
// 更多产品数据...
];
$itemsPerRow = 3; // 定义每行显示的项目数量
$totalProducts = count($products); // 获取产品总数
// 确保产品列表不为空
if ($totalProducts > 0) {
foreach ($products as $index => $product) {
// 当索引是 $itemsPerRow 的倍数时，开启一个新的 w3-row
// 例如，当 $index 为 0, 3, 6... 时
if ($index % $itemsPerRow === 0) {
echo '<div class="w3-row">';
}
?>
<div class="w3-third w3-container">
<h3><?php echo htmlspecialchars($product['name']); ?></h3>
<p>产品ID: <?php echo htmlspecialchars($product['id']); ?></p>
</div>
<?php
// 当当前元素是每行的最后一个元素时，或者当它是整个产品列表的最后一个元素时，关闭 w3-row
// 例如，当 ($index + 1) 为 3, 6, 9... 时，或者当 ($index + 1) 等于 $totalProducts 时
if (($index + 1) % $itemsPerRow === 0 || ($index + 1) === $totalProducts) {
echo '</div><!-- .w3-row -->';
}
}
} else {
echo '<p>暂无产品数据。</p>';
}
?>代码解析：
- $itemsPerRow = 3;：定义了每行要显示的列数，这里是三列。你可以根据需要修改这个值。
- $index % $itemsPerRow === 0：这个条件用于判断是否应该开启一个新的 w3-row。当 $index 是 $itemsPerRow 的倍数时（包括 0），说明我们来到了新行的第一个元素。
- `($index + 1) % $
