PHP images are not displaying properly

Question

Here is my code.

<?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;
?>

Having a problem with the images are not displaying the way I expected to, every time I insert or add a new image, it always go to the next row.

This is what I want for the layout.

But instead it keeps on displaying on the next row every time I add new image.

I also tried put it in a row class, but nothing happens.

Here is my CSS code.

.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%);
}

Divs are block elements, either float them, use flexbox or declare the elements as inline — Danial, Jul 01 '18 at 18:31
I think this will help you: https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side — Ole EH Dufour, Jul 01 '18 at 18:39
As @Danial mentions, divs are block elements. Block elements behave in such a way that they prevent any other elements from going on the same line. i.e., your panel boxes are being forced onto a new "line". To override the default behavior, you can try using `display:inline-block;`. Note that inline-block causes a weird 4px margin around things like this so you'll need to set a margin of -4px to overcome the added margin glitch. — www139, Jul 01 '18 at 18:47
If you share your CSS with us, we can put together answers. PHP is not the problem here. Your CSS is the problem. — www139, Jul 01 '18 at 18:48
To deal with any unwanted extra spacing (like the 4px comment), do not do -4px to anything. Instead, eliminate the actual whitespace characters (newlines/tabs/space chars) between those elements that are causing it. You can do this easily in php by just putting php open/close between `...
...` so it gobbles all whitespaces and newlines from output. Or use `echo '
...
';` to output without needless whitespacing. — IncredibleHat, Jul 01 '18 at 19:03

score 0 · Answer 1 · answered Jul 02 '18 at 07:46

Solved this by moving the div container outside the php code.

Check the code below.

<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 -->

I've tried different approach but it did not work with me, I hope this can help other people who's having the same problem as mine. Just put the div container outside the iteration.

PHP images are not displaying properly

1 Answers1