我有这个图像列表:
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演示