變換在電網

Question

名單上有圖像的這個名單：

http://thegelu.com/camera/ffffff.php

而且我想要的圖片顯示爲一個網格，不喜歡的列表。 （又名彼此相鄰的各圖片）

這裏是PHP代碼：

<?php 
    $uploadsDirectory = 'slides/tail/'; 
    if ($handle = opendir($uploadsDirectory)) { 
     echo '<hr/>'; 
     echo 'Official Backgrounds'; 
     echo '<hr/>'; 
     echo "<div class='bgitem' style='color:white;font-weight:bold'>None</div>"; 
     $uplo = array(); 
     while (false !== ($file = readdir($handle))) { 
      array_push($uplo, $file); 
     } 
     sort($uplo); 
     $user = array(); 
     foreach($uplo as $fname) { 
      if($fname != ".." && $fname != "."){ 
       if(substr($fname,0,1) != "_") 
        echo "<div class='bgitem'><img src='slides/tail/$fname' height='30px'/></div>"; 
       else 
        array_push($user, "$fname"); 
      }  
     } 

     echo '<hr/>'; 
     echo 'User Uploads :'; 
     echo '<hr/>'; 
     foreach($user as $div){ 
      echo $div; 
      closedir($handle); 
     } 
?> 

我在PHP初學者，所以我不知道到底該怎麼做。

提前致謝！

Answer 1

您可以使用CSS輕鬆實現網格視圖。如果添加了個人.bgitem物品的容器，你可以使用下面的CSS實現網格視圖：

.grid { 
    width: 100%; 
    float: left; 
    clear: both; 
} 

    .grid .bgitem { 
     float: left; 
     width: 30px; 
     height: 30px; 
     margin: 10px; 
    } 

反過來，你的標記應該是這個樣子：

<div class="grid"> 
    <div class="bgitem"><img src="slides/tail/1.png" height="30px"></div> 
    ... 
</div> 

jsFiddle Demo