Question

我正在尝试构建一个包含6行图像的网页。每行有4个图像，每个图像下方都有一个标题。所以它是这样的：

图像图像图像

TEXT TEXT TEXT TEXT

图像图像图像

TEXT TEXT TEXT TEXT

等等。

这是我的代码：

<?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。代码打印出文本旁边的每个图像。文字应在图像下方。我试图想办法以适当的格式显示图像和文本，但我现在似乎无法想到任何解决方案。任何人都可以给我一些见解？

Answer 1

你应该能够使用div来实现这一目标。以下代码将连续添加

svn up <newws>

这应该会给你一个看起来像jsfiddle

的结果

Answer 2

仅使用wrapper规则设置 display: inline-block班级

<?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>";
    }
} 
?>

以有序的方式使用PHP显示数据库中的数据

2 个答案: