Question

我正在使用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 "&nbsp;";
}
// 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;
}

Answer 1

您的图像右边有空白，这就是导致此错误的原因。从margin-right:10px中删除img，一切都会很好。

img {
    margin-top:70px;
    width:100;
    height:100;
    border-width:1px;
    border-style: solid;
}

Answer 2

尝试一下，我认为不需要position: absolute，您可以在一个跨度中添加每个textbox and 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 "&nbsp;";
}

// 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>";
}
?>

使用CSS在PHP中图像上方的文本问题

2 个答案: