PHP如何实现每3个DIV自动换行 排布为3列多行布局

方案1：纯CSS Flex布局（最简便，推荐） #

不需要修改PHP循环逻辑，仅通过样式即可实现3列自适应换行，维护成本最低：

1. 给所有子DIV的直接父容器添加样式：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px; /* 控制元素之间的间距，可自行调整 */
}

2. 给每个循环输出的子DIV设置宽度：

.wrapper > div {
  width: calc((100% - 20px) / 3); /* 总宽度减去2倍间距，除以3得到单元素宽度 */
  box-sizing: border-box;
}

你只需要把最外层包裹循环的容器加上wrapper类名即可，浏览器会自动按每行3个排列，超出自动折行，后续要改列数只需要调整CSS里的宽度计算值就行，不需要动PHP代码。

方案2：PHP计数插入换行标记 #

如果需要通过后端逻辑控制换行，可以在循环外初始化计数器，每输出3个元素就插入换行/清除浮动标记：

<?php
// 循环前初始化计数器
$colCount = 0;
?>
<!-- 外层父容器 -->
<div class="wrapper">
<?php
foreach ($listeProfilProjets as $profilProjets)
{
    $colCount++;
?>
    <div class="item">
        <!-- 你原有的DIV内部内容保持不变 -->
    </div>
<?php
    // 每输出3个元素，插入清除浮动的换行标记（仅浮动布局需要，flex布局不需要这步）
    if ($colCount % 3 === 0) {
        echo '<div style="clear: both;"></div>';
    }
}
?>
</div>

如果用这个方案配合浮动布局，需要给.item加float: left; width: 33.33%;样式，但这种方式适配响应式比较麻烦，优先选Flex方案。

你当前的HTML写法不符合规范，会导致布局渲染异常：

• <table>的直接子元素只能是表格相关标签（<thead>/<tbody>/<tr>等），不能直接放<div>、<td>
• <td>必须嵌套在<tr>标签内部，不能脱离行单独存在
  建议先修正这部分结构问题，否则样式可能无法按预期生效。

内容的提问来源于stack exchange，提问作者Walter Fabio Simoni