不對齊

我試圖讓所有的圖像可以並排顯示，用下面的代碼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

回答

相關問題