如何实现11条新闻的三列分栏（1/5/5条分配）？PHP代码导致第三列溢出

需求目标 #

将总计11条的新闻内容按规则排布为三列布局：

• 第一列仅放置1条核心置顶新闻
• 第二列顺序放置接下来的5条普通新闻
• 第三列放置剩余的最后5条普通新闻

故障表现 #

实际页面渲染时，仅第一列、第二列的内容可正常纳入分栏容器展示，第三列的全部内容游离在列容器结构外部，无法实现预期的三列对齐效果。

原代码核心逻辑缺陷 #

1. 分栏边界计算完全错位
   11条新闻场景下，原代码计算得$total_cols = 10、$left_column = 5、$right_column = 5，两个列的边界值完全重叠，根本没有对应到第三列的实际起始位置。
2. 列容器标签输出逻辑错误
   • 右列开启判断条件$i == $right_column因边界值冲突永远无法触发：当$i=5时已满足$i <= $left_column的判断分支，直接进入左列逻辑，右列的开标签从未被输出。
   • 循环执行时，只要满足$i <= $left_column就会反复输出左列的开标签，导致列容器在循环中被重复嵌套，HTML结构完全混乱。
3. 列闭合标签的判断逻辑与实际列范围不匹配，最终导致第三列无容器包裹。

修正后可正常运行的代码 #

$rows = [
    'Title1','Title2','Title3','Title4','Title5',
    'Title6','Title7','Title8','Title9','Title10','Title11'
];

// 明确定义三列的内容数量
$col1_count = 1; // 第一列1条
$col2_count = 5; // 第二列5条
$col3_count = count($rows) - $col1_count - $col2_count; // 第三列自动计算剩余数量

$i = 0;
echo "<div class='row'>";
foreach ($rows as $row) {
    $i++;
    // 仅在每个列的第一个元素位置输出列开标签
    if ($i == 1) {
        // 第一列：第1条新闻
        echo "<div class='col-md-4 main'>";
        $card_class = "primary_post";
    } elseif ($i == $col1_count + 1) {
        // 第二列起始：第2条新闻
        echo "<div class='col-md-4 left'>";
        $card_class = "other_post";
    } elseif ($i == $col1_count + $col2_count + 1) {
        // 第三列起始：第7条新闻
        echo "<div class='col-md-4 right'>";
        $card_class = "other_post";
    } else {
        $card_class = "other_post";
    }

    // 输出新闻卡片内容
    echo "<div class='card {$card_class}'>{$row}</div>";

    // 仅在每个列的最后一个元素位置输出列闭标签
    if ($i == $col1_count || $i == $col1_count + $col2_count || $i == count($rows)) {
        echo "</div>";
    }
}
echo "</div>";

修正后逻辑说明 #

• 每个列的开标签仅在对应列的第一条新闻位置输出一次，避免循环重复嵌套容器
• 每个列的闭标签仅在对应列的最后一条新闻位置输出，保证HTML结构完整闭合
• 第三列的内容数量通过总条数自动计算，不需要硬编码边界值，可适配不同总条数的场景

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