变换在电网

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