0

我正在尝试从文件夹中获取一些图像并以整洁和美观的方式显示它。为此，我使用 PHP 从文件夹中获取图像。

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/custom.css">
<title>Load Images from a folder</title>
</head>
<body>

<?php

$files = glob("*.JPG");
$fileCount = count(glob("*.JPG"));

echo '<ul id = \"gallery\">';
for ($i = ($fileCount -1); $i >= (0); $i--) {
    echo '<li> <img src="' . $files[$i] . '" alt="image" /> </li>';
}
echo '</ul>';

?>
</body>
</html>

除此之外，我正在使用以下 css。（下方）custom.css 文件与（上方）index.php 文件位于同一文件夹中。

#gallery li {
    display: inline;
    list-style: none;
    max-width: 250px;
    max-height: 250px;
    float: left;
    margin: 0px 20px 20px 0px;
    text-align: center;
}

但是，它不起作用。我得到一个在另一个之下的图像（每个图像都有一个项目符号），而不是像我期望的那样一个在另一个旁边。

我尝试使用文本将 css 文件重命名为 .php：

<?php "header("Content-type: text/css");" ?>

在顶部并用 'id=gallery' 标记了 'li'，这也没有帮助。

我在这里想念什么？

4

2 回答 2

2

display: inline将使元素不尊重浮动、高度/宽度和边距等内容。如果要使用浮点数，只需删除display: inline. 这应该使它们按预期流动。

如果这仍然不起作用，请检查您的浏览器的开发人员工具，以确保您的样式被应用，并且它们没有被其他地方的其他样式覆盖。

如果根本没有应用样式，请检查以下内容：

  1. 它正在寻找样式表。前导斜杠强制站点从根目录查找。如果那不是您的 css 文件所在的位置，它就不会找到它。
  2. 您的 PHP 正在编写正确的 HTML。当双引号括在单引号中时，您不需要转义双引号（也不需要在双引号中转义单引号）。id=\"gallery\"不一样id="gallery"。
于 2013-03-05T19:12:14.267 回答
0

你的ID错了，你应该有这个：

echo "<ul id='gallery'>";

代替

echo '<ul id = \"gallery\">';
于 2013-03-05T19:13:29.460 回答