本文详解如何通过 PHP foreach 循环结合模运算（% 3）动态构建语义正确、结构完整的三列商品网格，自动处理任意数量商品的分组与闭合，避免 HTML 标签错位或遗漏。
本文详解如何通过 php `foreach` 循环结合模运算（`% 3`）动态构建语义正确、结构完整的三列商品网格，自动处理任意数量商品的分组与闭合，避免 html 标签错位或遗漏。
在构建电商类页面时，将数据库中的商品数据按「每行最多三列」规则渲染为响应式网格，是常见但易出错的需求。你当前的代码将每个商品独立包裹在
中，虽能显示内容，但破坏了 HTML 的语义结构：.product-columns 的设计本意是作为「一行容器」（row wrapper），内部应包含 1–3 个商品卡片，而非每个商品独占一列容器。这会导致 CSS 布局失效（如 float: left; width: 33.3% 失去分组意义），且在移动端媒体查询中无法正确堆叠。
正确的做法是：用模运算控制容器的开启与关闭。核心逻辑如下：
- 使用计数器 $i 跟踪当前商品索引；
- 当 $i % 3 === 0 时（即第 0、3、6… 个商品），开启新的 .product-columns 容器；
- 当 $i % 3 === 2 时（即第 2、5、8… 个商品），关闭当前容器；
- 循环结束后，若最后一行未满三列（即 $i % 3 余数为 0 或 1），需手动补闭合标签，防止 DOM 结构断裂。
以下是优化后的完整 PHP 渲染逻辑（已整合 CSS 和 HTML 结构）：
<div class="product-wrapper">
<?php $i = 0;
foreach ($products as $prod) {
// 每 3 个商品开启一个新行容器
if ($i % 3 === 0) {
echo '<div class="product-columns">';
}
?>
<ul class="product-price">
<li class="product-name">= htmlspecialchars($prod['name']) ?></li>
<li class="product-grey">Price: €= number_format((float)$prod['price'], 2) ?></li>
<li class="product-grey">Sale Price: €= number_format((float)$prod['sale_price'], 2) ?></li>
<li class="product-grey">RRP: €= number_format((float)$prod['product_rrp'], 2) ?></li>
<li>Seller: = htmlspecialchars($prod['seller_nickname']) ?></li>
<li>Ext. Delivery: = htmlspecialchars($prod['delivery_time']) ?></li>
<li>Ext. Delivery Cost: €= number_format((float)$prod['del_cost_from'], 2) ?> to €= number_format((float)$prod['del_cost_to'], 2) ?></li>
<li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
</ul>
<?php // 每 3 个商品关闭当前行容器（即第 2、5、8… 个商品后）
if ($i % 3 === 2) {
echo '</div>';
}
$i++;
}
// 补闭合：若总商品数不能被 3 整除（如 1、2、4、5、7… 个），需关闭最后一行
if ($i > 0 && $i % 3 !== 0) {
echo '</div>';
}
?>
✅ 关键改进说明：
-
结构语义化：.product-columns 真正作为「行级容器」，内含 1–3 个
- 商品卡片，符合 CSS 浮动布局预期；
- 安全输出：使用 htmlspecialchars() 防止 XSS 攻击，number_format() 统一价格格式；
- 健壮闭合：末尾的 if ($i > 0 && $i % 3 !== 0) 确保无论商品总数为 1、7、10 还是 99，DOM 均完整闭合；
- 零冗余 HTML：不生成空容器，无隐藏元素，利于 SEO 与可访问性。
⚠️ 注意事项：
- 若改用 Flexbox 或 CSS Grid（推荐现代项目），可完全抛弃浮动与手动分组，直接对 .product-wrapper 设置 display: flex; flex-wrap: wrap;，子项设 flex: 0 0 calc(33.333% - 16px); 并配合 gap，此时 PHP 层仅需简单 foreach 输出卡片即可，大幅简化逻辑；
- 数据库查询务必添加 LIMIT 与分页逻辑，避免一次性加载海量商品拖慢首屏；
- 生产环境请启用 PHP 错误报告（error_reporting(E_ALL)）并捕获 $products 是否为数组，防止 foreach 报错。
掌握这种基于模运算的循环分组模式，不仅能解决三列网格问题，还可轻松扩展至两列、四列甚至动态列数（如 col-md-4 的 Bootstrap 栅格），是 PHP 模板开发中的基础而关键的技能。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
