Displaying data from database using PHP in an ordered fashion - php

Question

I am trying to build a web page that has 6 rows of images. Each row has 4 images and each image has a caption right below it. So it goes something like this:
IMAGE IMAGE IMAGE IMAGE
TEXT TEXT TEXT TEXT
IMAGE IMAGE IMAGE IMAGE
TEXT TEXT TEXT TEXT
and so on.
This is my code:
<?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>";
}
}
?>
Both classes are set to display: inline-block. The code prints out each image next to the text. The text should be below the image. I am trying to think of ways of displaying the images and the texts in the proper format, but I can't seem to think of any solutions at the moment. Anyone can give me some insight?

Answer 1

Set only the wrapper class with the display: inline-block rule
<?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>";
}
}
?>

Answer 2

You should be able to achieve this using divs.
The following code will add in a row ever
<?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++;
}
}
?>
That should give you a result that looks like the jsfiddle