Question

更新：在浏览器中查看了我的HTML代码后，我发现我只需要在foreach循环中一次在php中运行SQL代码，图像就会水平显示。我想知道如何使该sql代码在该循环中仅运行一次？

当我在foreach ($ffs as $ff) {内编写以下代码时

代码：

echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
    
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";

因此，当这段代码位于foreach循环中时，图像以垂直显示，而我希望图像以水平显示（一个接一个）。但是，如果我从foreach中删除该代码并将其放在foreach代码之外，则图像将水平显示并且可以正常工作。我尝试过CSS水平显示图像，但是只有从foreach删除该代码后，它才起作用。由于某种原因，上面的代码（在foreach中）以某种方式迫使图像垂直显示，所以无论我做什么，它都会垂直显示（图像）。

我无法将代码放在foreach之外。我知道我可以使用foreach遍历我的SQL代码，并且可以正常工作，但问题是我希望它像首先加载图像，然后仅从sql加载第一行，然后从sql加载第二个图像和第二行，为此，使其工作的唯一方法是将foreach放入我的sql代码中，因此一次加载一个，否则，如果我将其放入foreach之外，它将在sql中加载所有sql数据一次（假设1排到9排），则所有图像都没有意义。我将图像存储在托管网站文件中。

我的问题是如何强制图像水平显示？

我的代码：

    <?php
    session_start();
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    require "navigationbar.php";
    require "testing.php";
    ?>
    <html>
    <head>
    <link rel="stylesheet" href="userprofilestyl.css">
    
    </head>
    <body>
    <hr>
    
    <?php
    
    global $username;
    //username to get data of specific user
    $username = $_SESSION['name'];
    
    //to get image by username
    $image = "images/$username";
    global $increaseForText;
    $increaseForText = 0;
    
    function listFolderFiles($dir, $username, $increaseForText)
    {
    
       //getting images
        $ffs = scandir($dir);
    
        unset($ffs[array_search('.', $ffs, true)]);
        unset($ffs[array_search('..', $ffs, true)]);
        // prevent empty ordered elements
        if (count($ffs) < 1) {
            return;
        }
    
        $column_count = 0;
        $sql = "select  username_for_info, _name, _desc
        from info_desc where username_for_info = '$username'";
        try {
            require "testing.php";
    
            $stmt = $conn->prepare($sql);
            $stmt->execute();
    
            $Data = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo '<div class="image-container">';
    
            foreach ($ffs as $ff) {
    
                //select data from database
    
                $s = "'<li>'.$ff";
    
                $saving = "$dir/$ff";
    
                $string = "$saving";
                global $string_arr;
                $string_arr = (explode("/", $string));
    
                $sav;
                $sav = '<li>' . $ff;
    
                global $sa;
                $sa = "$ff";
    
                if (is_dir($dir . '/' . $ff)) {
                    listFolderFiles($dir . '/' . $ff, $username, $increaseForText);
                }
               //printing image

                if (is_file($saving)) {
                    echo '<img src="' . $saving . ' " width="100" height="100" alt="Random image"   />';
                }
               //printing text

                echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
    
                echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
                echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
    
                $increaseForText++;
    
            }
    
        } catch (PDOException $e) {
            echo '{error":{"text":' . $e->getMessage() . '}}';
        }
        echo '</div>';
    
    }
    listFolderFiles($image, $username, $increaseForText);
    
    ?>
    </body>
    </html>

Answer 1

将此添加到您的CSS文件：

.image-container{
  display:inline-flex;
  flex-flow:row;
}

这将将“ image-container”类的div中每个元素的流量从垂直更改为水平

Answer 2

Foreach与使图像垂直显示无关，HTML或CSS应该有问题。确保您的标签是封闭的，例如p和li标签。

有很多方法可以使图像水平显示，如果您可以发送jsfiddle或代码段，则会更容易。

但是请在.image-container上尝试一下：

display: flex !important;
   flex-flow: row;

图像垂直而不是水平显示

2 个答案: