CODEWITHSUNDEEP
phphtmlcss
udbhavs
udbhavs

Reputation: 98

PHP specific images not aligning

I'm trying to make all images be displayed side by side with the following code:

<div id = "all-container">
  <?php 

  $dir = "images/";
  $arr = scandir($dir);

  foreach ($arr as $img) {
    if ($img != '.' && $img != '..') {
      echo "<div class = 'img-container'><img class = 'image' src = 'images/$img'></div>";
    }
  }
  ?>
</div>

This is class 'img-container' in CSS:

.img-container {
  float: left;
  display: inline-block;
}

Apparently, this seems to work when I set the image source to some random picture from the internet.

But when I use my own images, they're still displayed top to bottom.
The images I'm using are the Windows 7 Sample Pictures (1024 x 768 in size, JPG).

I tried many times, and if I just change the source of the image, it seems to work.

Is there something wrong with my code?

Upvotes: 0

Views: 63

Answers (1)

Alireza
Alireza

Reputation: 2449

you should nest img tags like below:

<div class = 'img-container'>
<img class = 'image' src ='http://lorempixel.com/200/200'>
<img class = 'image' src ='http://lorempixel.com/200/200'>
</div>

But your code will create div tag with img-container class each time it repeats; you will need to print out :

<div class = 'img-container'>

before foreach and 

</div> /*end of img-container div tag*/

after it.

Upvotes: 3

Related Questions