PHP 特定图像未对齐

Question

我正在尝试使用以下代码并排显示所有图像:

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

这是 CSS 中的“img-container”类:

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

显然，当我将图像源设置为某个 random picture 时，这似乎有效。来自网络。

但是当我使用自己的图片时，它们仍然从上到下显示。
我使用的图像是 Windows 7 示例图片(大小为 1024 x 768，JPG)。

我试了很多次，如果我只是改变图片的来源，似乎就可以了。

我的代码有问题吗？

Answer 1

你应该像下面这样嵌套 img 标签:

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

但是您的代码每次重复时都会创建带有 img-container 类的 div 标签；你需要打印出来:

<div class = 'img-container'>

在 foreach 和

之前

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

在它之后。