Transform список в сетке

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