我正在使用 php 扫描目录以查找所有 jpg 和 png 文件并将它们放在文本下方，但最后一张图像的文本放置不正确。我在这里做错了什么？
php代码:
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<?php
$dir = "images/";
function s($num){
for($i=0;$i<$num;$i++)
echo " ";
}
// Open a directory, and read its contents
echo "<div class=\"container\">";
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false)
{
$File_name = realpath('$file');
$full_path = $dir.$file;
$ext = pathinfo($file);
if($ext['extension']=="jpg" || $ext['extension']=="png")
{
echo "<span class=\"scan-text\">Some text above</span>";
echo "<img src=\"{$full_path}\" height=\"100\" width=\"100\">";
}
}
closedir($dh);
}
echo "</div>";
}
?>
CSS 代码:
.scan-text {
position:absolute;
text-align:center;
margin-top:20px;
border-style: solid;
border-width: 1px;
width:100px;
}
img {
margin-top:70px;
margin-right:10px;
width=100;
height=100;
border-width:1px;
border-style: solid;
}
.container {
width:1100px;
}
最佳答案
试试这个，我认为不需要 position: absolute，你可以在一个 span 中添加每个 textbox 和 image 并使用 css 来设置样式
CSS
.block {
width: 100px;
display: inline-block;
margin-right: 15px;
}
.scan-text {
display: block;
text-align:center;
margin-top: 15px;
border-style: solid;
border-width: 1px;
width:100px;
}
img {
margin-top: 15px;
width: 100px;
height: 100px;
border-width:1px;
border-style: solid;
}
.container {
width:1100px;
}
PHP
<?php
$dir = 'images/';
function s($num) {
for ($i = 0; $i < $num; $i++)
echo " ";
}
// Open a directory, and read its contents
echo "<div class=\"container\">";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$File_name = realpath('$file');
$full_path = $dir . $file;
$ext = pathinfo($file);
if ($ext['extension'] == "jpg" || $ext['extension'] == "png") {
echo "<span class=\"block\"><span class=\"scan-text\">Some text above</span>";
echo "<img src=\"{$full_path}\" height=\"100\" width=\"100\"></span>";
}
}
closedir($dh);
}
echo "</div>";
}
?>
关于php - 使用css在php中图像上方的文本问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51114010/