PHP实现图片水平排列（每行4张）：当前垂直显示问题求助

嘿，我来帮你搞定图片排版的需求！你的原始代码之所以会垂直显示图片，是因为没做好每行的容器控制——每个图片都单独生成了，但没有按4张一组来划分行。咱们通过加个计数器就能轻松解决这个问题，下面是调整后的完整代码和思路说明：

<?php
$query1 = mysqli_query($db_con, "select * from image_tb");
$count = 0; // 初始化图片计数器
?>
<div class="block-content collapse in">
    <!-- 先开启第一个行容器 -->
    <div class="row-fluid padd-bottom">
        <?php while ($row = mysqli_fetch_array($query1)) { ?>
            <div class="span3">
                <a href="#" class="thumbnail">
                    <img src="<?php echo $row['img_location']; ?>" alt="260x180" style="width: 260px; height: 180px;">
                </a>
            </div>
            <?php
            $count++;
            // 每满4张图片就切换行（避免最后一次循环多开空行）
            if ($count % 4 == 0 && mysqli_num_rows($query1) != $count) {
            ?>
                </div>
                <div class="row-fluid padd-bottom">
            <?php
            }
            ?>
        <?php } ?>
    </div> <!-- 闭合最后一个行容器 -->
</div>

关键改动说明： #

• 计数器跟踪：用$count变量记录已经输出的图片数量，方便判断何时换行
• 行容器控制：
  • 循环开始前先创建第一个row-fluid行容器
  • 每输出4张图片后，检查是否还有剩余图片，有就闭合当前行并开启新行
  • 循环结束后确保最后一个行容器被正确闭合
• Bootstrap适配：你用的span3类刚好适配Bootstrap12栅格系统，4个span3（3×4=12）刚好占满一行，不用修改这个类就能完美实现每行4张的布局

这样调整后，图片就会自动水平排列，每行最多显示4张，超出的会自动换到下一行啦！

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