我正在尝试从文件夹中获取一些图像并以整洁和可呈现的方式显示它。为此,我使用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',但也没有帮助。
我在这里缺少什么?
答案 0 :(得分:2)
display: inline
会使元素不符合浮点数,高度/宽度和边距等内容。如果您要使用花车,只需删除display: inline
即可。这应该使它们按预期流动。
如果这仍然不起作用,请检查您的浏览器的开发人员工具,以确保您的样式得到应用,并确保它们不会被其他地方的某些其他样式覆盖。< / p>
如果根本没有应用这些样式,请检查以下内容:
id=\"gallery\"
与id="gallery"
不同。答案 1 :(得分:0)
你的身份证错了,你应该这样:
echo "<ul id='gallery'>";
而不是
echo '<ul id = \"gallery\">';