变换网格中的列表


Transform list in grid

我有这个图像列表:

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的初学者,所以我不知道该怎么做。

提前感谢!

使用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演示