Question

我有这段代码来显示文件夹中的图像，但问题是它会垂直显示图像（有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>

Answer 1

尝试使用img tag的样式将display: block;更改为display: inline-block;。

修改

好的，我想我知道问题出在哪里。您将每个图像放在一个单独的表行中，所以尝试在一行中放置更多或不使用表格，但是我给你的css更改的简单容器。

Answer 2

图像是垂直列出的，因为它们包含在表格的各个行中。此外，在CSS中，您将它们设置为显示为块。

删除display: block图片，不要将它们放在表格中。

另外，不要一次显示9000张图像。使用分页。

显示文件夹php（horizontal）中的图像

2 个答案:

显示文件夹php（horizo​​ntal）中的图像

2 个答案:

显示文件夹php（horizontal）中的图像