如何每 3-4 列数据生成一个新的 div 行答案

【问题标题】：How generate a new div row per 3-4 colums of data如何每 3-4 列数据生成一个新的 div 行
【发布时间】：2021-02-11 04:15:06
【问题描述】：

我知道这个问题之前已经提出了很多，但我仍然没有得到它的工作。我正在尝试添加我制作的每个帖子，以每 3-4 列并排显示。现在，我有这样的东西：

但我想让它们并排放置，像这样

（图片来自某人之前的问题）。这是我的代码的 sn-p 来自哪里

<div>
            <?php
            global $connection;
            $nRows = $connection->query("SELECT * 
                                                   FROM posts
                                                   ORDER BY post_id DESC");
            if($nRows->rowCount() > 0) {
                while ($row = $nRows->fetch()) {
                    $post_title = str_replace('_', ' ', $row['post_title']);
                    $post_author = $ed->encrypt_decrypt('decrypt',$row['post_author']);
                    $post_file = $row['post_file'];
                    $post_date = $row['post_time'];
                    ?>
                    <!-- Blog Content BEGIN Display-->
                    <div class="column">
                        <h2>
                            <!-- This redirects you to a specific post -->
                            <a href="post/postFetch/fetchByTitle/fetchByPT.php?post_id=<?php echo $row['post_id'];?>&post_title=<?php echo $row['post_title'];?>" class="link-post-title" style="font-family: Arial"><?php echo "#".$row['post_id'] . " ". $post_title;?></a>
                        </h2>

                        <p class="lead" style="font-family: FontAwesome">
                            <!-- This redirects you to the post author -->
                            &#xf21b; <a href="post/postFetch/fetchByAuthor/fetchByPA.php?post_author=<?php echo $row['post_author'];?>" class="link-post-author" style="font-family: Arial"><?php echo $post_author;?> </a> <?php //echo ' ' . '#' . str_replace(',', '#', $row['post_tags']);?>
                        </p>

                        <!-- if there is no image, just remove the entire div --><?php
                        $file_parts = pathinfo($post_file);
                        if(isset($file_parts['extension'])){
                            switch ($file_parts['extension']){
                                case "jpg":
                                    if(!empty($post_file)) { ?>
                                        <div class="imgBox">
                                             <img src="post/postFiles/<?php echo $post_file;?>">
                                        </div><?php
                                    }
                                    break;
                                case "mp4":?>
                                    <div class="vidBox">
                                         <video width="615" height="315" controls>
                                             <source src="post/postFiles/<?php echo $post_file;?>">
                                         </video>
                                    </div><?php
                                    break;
                                case "": // Handle file extension for files ending in '.'
                                case NULL: // Handle no file extension
                                    break;
                            }
                        }?>
                        <p style="font-family: Arial"><span class="glyphicon glyphicon-time"></span><?php
                            echo "Posted on " . $post_date;?>
                        </p>
                    </div>
                    <!-- Blog Content END Display --><?php
                }
            } else { ?>
                <p style="color: darkgoldenrod" class="mssgAlign"><u>NO RECORDS</u></p><?php
            }
            $nRows = null;
            }?>
        </div>

我没有使用 Bootstrap。也许这是我的错误，我应该开始这样做，但与此同时，我会继续我的工作。欢迎任何帮助/提示

【问题讨论】：

您的问题不在于 PHP，我建议使用纯 HTML 中的虚拟数据创建该页面，并在您确定您的 html 代码工作正常之后，然后添加您的 PHP 代码。要回答您的问题，您可能需要使用flex-box

标签： php html css loops

【解决方案1】：

您可以在包装器（父 div）内包装每 4 列（带内容的 div）的组，并设置列以显示内联块。

<?php
$break = 0;

for($i = 0; $i < 200; $i++)
{   
    if($break % 4 === 0)
    {
        echo '<br>open div<br/>'; //your wrapper/row start
    }

    $break++;

    echo $i . ' '; //your column with content

    if($break % 4 === 0)
    {
        echo '<br />close div<br />'; //your wrapper/row end
    }   
}

【讨论】：