如何用PHP将MySQL查询结果按3列垂直拆分展示？

嘿，我完全懂你的痛点！原来的代码是按横向每3条拆一列，但你要的是纵向按总条数均分3列——有余数的时候，多出来的条目得优先分给前面的列（比如10条就4/3/3），而且因为每个结果项高度不固定，必须保持垂直列的结构，不能出现第四列破坏布局。

下面给你一套完美解决这个问题的方案：

核心思路 #

首先得把所有查询结果先存到数组里，这样我们能先计算好每列该放多少条，再按垂直顺序把结果分到三个列里，而不是循环的时候实时判断拆分。具体步骤：

• 把所有查询结果捞出来存成数组，方便后续分组
• 计算总条目数，然后给每列分配数量：
  • 先算每列的基础条数：$base = 总条数 ÷ 3（取整）
  • 余数就是总条数除以3剩下的数
  • 第一列拿基础条数 + （如果余数≥1就加1）
  • 第二列拿基础条数 + （如果余数≥2就加1）
  • 第三列就拿基础条数
• 按计算好的数量把数组切成三部分，然后分别输出每一列

完整可运行代码 #

<?php
// 先把所有查询结果存入数组
$result = $mysqli->query("SELECT * FROM stories ORDER BY RAND()");
$allStories = [];
while($row = $result->fetch_assoc()) {
    $allStories[] = $row;
}
$totalStories = count($allStories);

// 处理空数据的情况
if ($totalStories === 0) {
    echo "<p>暂无故事内容~</p>";
    exit;
}

// 计算每列应该放多少条
$baseCount = floor($totalStories / 3);
$remainder = $totalStories % 3;

$col1Num = $baseCount + ($remainder >= 1 ? 1 : 0);
$col2Num = $baseCount + ($remainder >= 2 ? 1 : 0);
$col3Num = $baseCount;

// 把数组拆成三列对应的子集
$col1Stories = array_slice($allStories, 0, $col1Num);
$col2Stories = array_slice($allStories, $col1Num, $col2Num);
$col3Stories = array_slice($allStories, $col1Num + $col2Num, $col3Num);
?>

<div class="grid">
    <div class="col">
        <?php foreach($col1Stories as $story): ?>
            <div class="result">
                <!-- 这里替换成你的实际内容，比如标题、内容等 -->
                <?php echo htmlspecialchars($story['title']); ?>
                <p><?php echo htmlspecialchars($story['content']); ?></p>
            </div>
        <?php endforeach; ?>
    </div>
    <div class="col">
        <?php foreach($col2Stories as $story): ?>
            <div class="result">
                <?php echo htmlspecialchars($story['title']); ?>
                <p><?php echo htmlspecialchars($story['content']); ?></p>
            </div>
        <?php endforeach; ?>
    </div>
    <div class="col">
        <?php foreach($col3Stories as $story): ?>
            <div class="result">
                <?php echo htmlspecialchars($story['title']); ?>
                <p><?php echo htmlspecialchars($story['content']); ?></p>
            </div>
        <?php endforeach; ?>
    </div>
</div>

为什么这个方案能解决你的问题？ #

• 先把所有结果存数组，我们可以完全按垂直逻辑分组，而不是原来那种循环到第3条就切列的横向拆分，从根源上避免了第四列的出现
• 余数分配逻辑完全符合你的需求：10条→4/3/3，11条→4/4/3，12条→4/4/4，完美适配任何数量的记录
• 因为是按垂直列输出，每个.result高度不一样也没关系，三列的结构会保持稳定，不会乱掉

小提醒 #

• 记得用htmlspecialchars()转义输出的内容，防止XSS攻击，这是后端输出前端内容的基本安全规范
• 加了空数据的处理，避免没有结果的时候页面空着，体验更好

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