PHP图像无法正确显示

Question

这是我的代码。

<?php

$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>

<div class="box">
  <div class="panel">
    <div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
      <div class="overlay">
         <div class="content">
          <strong>Title</strong>
          <p>Some text</p>
        </div>
      </div>
    </div>
  </div>
</div>

  <?php
endwhile;
?>

图像出现问题时，显示的图像没有按我预期的方式显示，每次插入或添加新图像时，图像总是转到下一行。

这就是我想要的布局。

https://api.jquery.com/toggleclass/

但是，每次我添加新图像时，它都会继续显示在下一行。

我也尝试将其放在一行类中，但是什么也没发生。

这是我的CSS代码。

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.panel {
  height: 230px;
  min-width: 250px;
  margin: 10px;
  flex: 1 1 30%;
}

.image {
  background-size: cover;
  height: 230px;
}

.overlay {
  position: relative;
  background-color: rgba(15, 10, 36, 0.5);
  height: 230px;
}

.content {
  text-align: center;
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

通过将div容器移到php代码之外来解决此问题。

检查下面的代码。

<div class="box"> <!-- This div -->
<?php

$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>

  <div class="panel">
    <div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
      <div class="overlay">
         <div class="content">
          <strong>Title</strong>
          <p>Some text</p>
        </div>
      </div>
    </div>
  </div>


  <?php
endwhile;
?>

</div> <!-- and this div -->

我尝试了不同的方法，但是这种方法不适用于我， 我希望这可以帮助其他与我有同样问题的人。只需将div容器放在迭代之外即可。