PHP 图片库。 CSS 弹性框问题。只有第一张图片在弹性框内

Question

任何人都可以告诉我我的代码有什么问题，只有第一个图像在 flexbox 内，而其他两个在外面浮动？

它应该做的是显示每行三个图像的画廊。第一段 PHP 代码是在画廊上方给出图像计数。

这是HTML/PHP ...

<html>
    <head>
        <title>GALLERY TEST</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-sacle 1.0">
        <link rel="stylesheet" href="styles/master-style.css">
    </head>
    <body>


<?php
    include_once 'include/dbh.inc.php';

        $sql3 = "SELECT * FROM bth_gal_data WHERE GAL_TLC='LSF'";
        $result3 = mysqli_query($conn, $sql3);
        $queryResults3 = mysqli_num_rows($result3);

        echo "<main class='GALLERY_WRAPPER'>
            <p>Welcome to the TEST Image gallery. There are $queryResults3 images.<p>";
?>
            <div class='GALLERY_FLEX'>
<?php

            $stmt4 = mysqli_stmt_init($conn);
            if (!mysqli_stmt_prepare($stmt4, $sql3)) {
              echo "SQL statement failed!";
            } else {
              mysqli_stmt_execute($stmt4);
              $result4 = mysqli_stmt_get_result($stmt4);
                while ($row = mysqli_fetch_assoc($result4)) {
                echo "<a href='#'>
                    <img src=".$row['GAL_PATH']." alt=".$row['GAL_DESC']." data-id=".$row['GAL_FILENAME']." width='300' height='auto'>
                </a>
        </div>

        </main>";
        }
    }

?>


    </body>
</html>
...

这是CSS ...

@font-face {
  src url(../fonts/Catamaran-Regular.ttf);
  font-family: Catamaran;
}

@font-face {
  src url(../fonts/CormorantGaramond-Regular.ttf);
  font-family: Cormorant Garamond;
}

.GALLERY_WRAPPER p {
  margin: 10px 0px;
  font-family: Catamaran;
  font-size: 24px;
  font-weight: 900;
  color: #111;
}
.GALLERY_WRAPPER {
  width: 1000px;
  margin: 30px auto;
}
.GALLERY_FLEX {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  background-color: blue;
}
.GALLERY_FLEX a {
  width: 300px;
  margin: 10px 5px 0;
}
.GALLERY_FLEX img {
  width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

...

Answer 1

我想我明白了。我相信您在 while 循环的早期关闭了 </div> 和 </main>。这两个部分应该在它之外。所以像这样。编辑：我认为它们应该完全脱离 PHP 循环，所以像这样。

    <?php

                $stmt4 = mysqli_stmt_init($conn);
                if (!mysqli_stmt_prepare($stmt4, $sql3)) {
                  echo "SQL statement failed!";
                } else {
                  mysqli_stmt_execute($stmt4);
                  $result4 = mysqli_stmt_get_result($stmt4);
                    while ($row = mysqli_fetch_assoc($result4)) {
                    echo "<a href='#'>
                        <img src=".$row['GAL_PATH']." alt=".$row['GAL_DESC']." data-id=".$row['GAL_FILENAME']." width='300' height='auto'>
                    </a>"; }

        }

    ?>
</div>
</main>

PHP 图片库。 CSS 弹性框问题。只有第一张图片在弹性框内

PHP image gallery. CSS issue with flexbox. only first image is inside the flex box

php

css

image

flexbox

photo-gallery