我有这段代码来显示文件夹中的图像,但问题是它垂直显示图像(有 9000 张图像),因此滚动结束。
我想知道是否可以水平制作图像?
我使用的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Show images in folder</title>
<style type="text/css">
body {
margin: 0 auto 20px;
padding: 0;
background: #acacac;
text-align: center;
}
td {
padding: 0 0 50px;
text-align: center;
font: 9px sans-serif;
}
table {
width: 100%;
}
img {
display: block;
margin: 20px auto 10px;
max-width: 900px;
outline: none;
}
img:active {
max-width: 100%;
}
a:focus {
outline: none;
}
</style>
</head>
<body>
<?php
$folder = 'album1584/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
$sortedArray = array();
for ($i=0; $i<count($files); $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
krsort($sortedArray);
echo '<table>';
foreach ($sortedArray as &$filename) {
#echo '<br>' . $filename;
echo '<tr><td>';
echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
echo '</td></tr>';
}
echo '</table>';
?>
</body>
</html>
图像是垂直列出的,因为它们包含在表格的各个行中。此外,在CSS中,您将它们设置为显示为块。
删除图像的display: block
,不要将它们放在表格中。
此外,不要一次显示 9000 张图像。使用分页。
尝试将 img 标签的display: block;
更改为按样式display: inline-block;
。
编辑:
好的,我想我知道问题可能在哪里。您将每个图像放在单独的表格行中,因此请尝试将更多图像放在一行中,或者不要为此使用表格,而是使用我给您的带有 css 更改的简单容器。