无法让 div 标签块正确排列

Question

我正在使用这段代码（大部分是从 PHP.net 评论复制的 - http://www.php.net/manual/en/function.imagecolorat.php）为了读取图片，逐像素扫描并将图片作为 div 标签块输出餐桌般的时尚。这就是我想到的...

<?php 
$img = imagecreatefrompng("image1.png"); 

$w = imagesx($img); 
$h = imagesy($img); 

for($y=0;$y<$h;$y++) { 
   for($x=0;$x<$w;$x++) { 
      $rgb = imagecolorat($img, $x, $y); 
      $r = ($rgb >> 16) & 0xFF; 
      $g = ($rgb >> 8) & 0xFF; 
      $b = $rgb & 0xFF;
      $hex = "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b);
     echo "<div style='background: {$hex}; height: 5px; width: 5px; display: inline;'></div>\r\n";
     /*
        echo "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b).","; 
     */ 
  } 
  echo "<br />\r\n"; 
} 
?>

我尝试使用“block”、“inline”、“inline-block”和“inline-table”作为 div 的显示属性，但它们似乎都有自己的问题。我要么什么也得不到，像素列在垂直线上直接向下，或者div在正方形中正确排列，但它们之间有间距（这不应该发生，因为我使用reset.css来消除所有填充、间距等）。

此外，这个特定的函数似乎没有考虑到透明度。我正在使用的图片中有透明像素，它似乎将它们输出为浅蓝色。

链接 - http://schnell.dreamhosters.com/folio/pixelread.php

Answer 1

嗯，这是一个有趣的问题。我不能保证该函数具有透明度，但 HTML 定位问题应该很容易解决。

我认为最好的解决方案是创建一个与图像一样宽的容器，然后将所有 div 向左浮动。 像 Which一样的东西

echo "<div style='width: ".($imagesx * 5)."px;' class='outer'>";

会给出你需要的宽度（如果我正确理解代码的话）。然后你只需使用这个CSS：

.outer div {
  width: 5px;
  height: 5px;
  float: left;
}

这样做将有效地减少你必须生成的冗余内联样式的数量。哦，并删除每行后面生成的 br 。

至于alpha透明度问题，我相信这个评论应该对你有帮助： http ://www.php.net/manual/en/function.imagecolorat.php#79116

---

编辑

您忘记了 width: 65px 上的 px！这是正在生成的。

<div style='width: 65; background: #eeeeee; margin: 0px auto;'>

还有，可爱的马里奥。 ;)

Answer 2

 echo "<div style='background: {$hex}; height: 5px; width: 5px; position: absolute; top: {$y * 5}; left: {$x * 5};'></div>\r\n";

您需要将它们全部放置在 position:relative; 包含元素中。并且可能也删除
。