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>

这是课程＆＃39; img-container＆＃39;在CSS中：

.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*/

之后。

PHP特定图片未对齐

1 个答案: