使用PHP以有序的方式显示数据库中的数据 - Displaying data from database using PHP in an ordered fashion

Displaying data from database using PHP in an ordered fashion

我正试图建立一个有6行图像的网页。每行有4张图片，每张图片的下方都有一个标题。就像这样:

IMAGE IMAGE IMAGE IMAGE

文本文本文本文本文本

IMAGE IMAGE IMAGE IMAGE

文本文本文本文本文本

等等

这是我的代码:

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    while ($rows = $resultSet->fetch_assoc()) {
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<img class=images src=$image> <p  class=texts>$text</p>";
    }
}           
?>

两个类都设置为display: inline-block。代码打印出文本旁边的每个图像。文本应该在图像的下面。我正在想办法用合适的格式来展示图片和文字，但目前我似乎想不出任何解决方案。有人能给我点建议吗?

设置仅为display: inline-block规则的wrapper类

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    while ($rows = $resultSet->fetch_assoc()) {
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<div class='wrapper'>";
        echo "<img class=images src=$image> </br> <p  class=texts>$text</p>";
        echo "</div>";
    }
} 
?>

您应该能够使用div来实现这一点。下面的代码将添加一行

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    $count = 0;
    while ($rows = $resultSet->fetch_assoc()) {
        $num_in_row = 4; // Number of items you want in each row
        if($count % $num_in_row == 0){
            echo '<div class="row">'; // if the row already has 4 items, add a new row.
        }
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<span class='wrapper'>";
        echo '<img class="images" src='.$image.'> <div class="texts">'.$text.'</p>';
        echo "</span>";
        if($count % $num_in_row == ($num_in_row-1)){
            echo '</tr>';
        }
        $count++;
    }
} 
?>

结果应该与jsfiddle

类似