gpt4 book ai didi

css - 显示文件夹 php 中的图像(水平)

转载 作者:行者123 更新时间:2023-11-28 07:59:13 24 4
gpt4 key购买 nike

我有这段代码来显示文件夹中的图像,但问题是它垂直显示图像(有 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 中,您将它们设置为显示为一个 block 。

移除图像的 display: block 并且不要将它们放在表格中。

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

关于css - 显示文件夹 php 中的图像(水平),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29894709/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com