不对齐

我试图让所有的图像可以并排显示，用下面的代码PHP特定图片：不对齐

<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-容器”：

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

显然，这似乎工作，当我从互联网上设置图像来源random picture。

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

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

我的代码有问题吗？

来源

2017-06-02 udbhavs

当你使用float时，你不需要'inline-block'。如果浮动图像的宽度不大于文档（或父div）的宽度，浮动图像将彼此相邻显示。因此，如果您使用的是1024x768的图片，如果您的屏幕大于2048，则它们将显示为彼此相邻。 – Angie

如果宽度超过屏幕宽度，则会检查图片的宽度，然后其他图片会自动换行。 –

just引导它，不要使用这样大的图像;使用缩略图 –

你应该巢的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-容器类div标签; 你需要打印出：

<div class = 'img-container'>

的foreach之前和

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

后

。

来源

2017-06-02 12:36:58 AMH

谢谢！他们现在是并排的。 – udbhavs

回答

相关问题