PHP特定图像未对齐答案

【问题标题】：PHP specific images not aligningPHP特定图像未对齐
【发布时间】：2017-11-03 20:32:25
【问题描述】：

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

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

我试了很多次，如果我只是改变图像的来源，它似乎可以工作。

我的代码有问题吗？

【问题讨论】：

使用浮点数时不需要inline-block。如果浮动图像的宽度不大于文档（或父 div）的宽度，浮动图像将彼此相邻显示。因此，如果您使用的是 1024x768 的图片，如果您的屏幕大于 2048，它们将彼此相邻显示。
检查图像宽度，如果宽度大于屏幕宽度进行调整，其他图像将自动换行
只是引导它，不要使用这么大的图像；使用缩略图
即使我将大小设置为 10%，它们也是从上到下的。

标签： php html css

【解决方案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*/

在它之后。

【讨论】：

谢谢！他们现在并排在一起。