谁能告诉我，我的代码中只有第一张图片在flexbox里面，而其他两张图片在外面漂浮，这到底是怎么回事？
它应该做的是显示一个图片库，每行有三个图片。第一段PHP代码是在图库上方给出一个图片数量。
下面是HTMLPHP...
<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;
}
...
我想我知道了。 我想你是关闭了你的 </div> 和 </main> 在while循环的早期。 那2个部分应该在它的外面。所以像这样。编辑：我认为它们应该完全不在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>