【问题标题】:Images are displaying vertically rather horizontally图像垂直显示而不是水平显示
【发布时间】:2021-01-18 18:42:11
【问题描述】:

更新:在浏览器中查看我的 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的所有数据(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>

【问题讨论】:

标签: php css sql database image


【解决方案1】:

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

有很多方法可以让图像水平显示,如果你可以发送一个jsfiddle或一个代码sn-p会更容易。

但是在 .image-container 上试试这个:

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

【讨论】:

  • mam** 有没有可以发布我的 php 代码的地方? jsfiddle 似乎只适用于 javascript、html 和 css。
  • 很遗憾,没有,但您可以发布带有虚拟图像的 html 和 css 代码。我很确定 foreach 与它的对齐无关
  • 我查看了我的 html 代码。由于某种原因我无法复制它,但是它垂直显示图像的原因是因为我的 sql 代码运行了多次,所以我需要强制它在 for 循环中只运行一次
【解决方案2】:

将此添加到您的 css 文件中:

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

这将改变 div 中每个元素的流向,类“image-container”从垂直到水平

【讨论】:

  • 我试过了,但图像仍然垂直显示。
  • 您能否发布页面完全呈现后生成的html?
  • 我没明白你的意思。你能解释一下吗?在将代码更改为您所说的内容后,您是否希望我在页面加载时添加我网站的屏幕截图。这就是post the html resulting once the page is fully rendered 的意思吗?
  • 在您的页面中,按 Ctrl + U 这将显示您页面的 html 代码。复制所有内容并将其发送到此处,或发布到其他地方并发送链接。您可以使用pastebin.com 粘贴您的代码。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-08-26
  • 2011-12-22
  • 2017-07-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多