带有CSS问题的PHP随机DIV

Question

我尝试使用 PHP 使 DIV 随机位置。我们可以把每个100px看成一个单位，打一个小div是1*1，打两个小div是1*2，打三个小div是2*1。所有的 div 只允许显示在一个 10*6 的大 div 框中。这是我的代码。

<?php
function DIV1()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800","900");
    $choose = array("0","100","200","300","400","500");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:100px;height:100px;background:#ff0 none;\"></div>";
}
function DIV2()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800","900");
    $choose = array("0","100","200","300","400");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:100px;height:200px;background:#f00 none;\"></div>";
}
function DIV3()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800");
    $choose = array("0","100","200","300","400","500");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:200px;height:100px;background:#00f none;\"></div>";
}
echo '<div style="width:1000px;height:600px;">';

$sizes = array();
for($i = 0; $i < 15; $i ++) $sizes[] = DIV1($row);
for($i = 0; $i < 10; $i ++) $sizes[] = DIV2($row);
for($i = 0; $i < 5; $i ++) $sizes[] = DIV3($row);
shuffle($sizes);

for($i = 0; $i < 30; $i ++) echo $sizes[$i];
echo '</div>';
?>

我还有一些 CSS 问题。在我的代码中，我设置了 postion:absolute 和 top left 设置，但是有些 div 会 overlapping。如何解决？谢谢。

Answer 1

1) 你应该在 3 个 div 函数的最后一行使用“return”而不是“echo”，这样数组大小才会有任何效果

2)你的问题不标准，有点数学挑战，你必须“记住”位置和手工洗牌

3) 下面的代码可以作为您的解决方案吗？ ( test here )

<?php
function divHtml($dtype, $x, $y) //$dtype: (1)=1x1yellow, (2)=1x2, (3)=2x1, (4)=1x1white
{  $ww =($dtype ==3) ?'200px':'100px';    $hh =($dtype==2)?'200px':'100px'; $bgcols =array('#ff0', '#f00', '#00f', '#fff');
   $xx =($x*100) .'px';                   $yy =($y*100) .'px';              $bgc    =$bgcols[$dtype-1];
   return "<div style='position:absolute; width:$ww;height:$hh; left:$xx;top:$yy; background:$bgc;'> $dtype </div>";
}
$divs =array(); //real divs array (html inside)
$cells =array(); //logical filled/notFilled (0/1) array
for ($i=0; $i<60; $i++) $cells[$i] =0; 

function reserve($dtype, $x, $y)
{  global $cells, $divs;      if ($y*10+$x >59 ||($cells[$y*10+$x])) return false;
   switch ($dtype)
   {  case 2: if ($y ==5 || $cells[$y*10+$x] ||$cells[($y+1)*10+$x]) return false;  $cells[($y+1)*10+$x] =1; break;
      case 3: if ($x ==9 || $cells[$y*10+$x] ||$cells[$y*10+$x+1])   return false;  $cells[$y*10+$x+1] =1;   break;
   }
   $cells[$y*10+$x] =1;      $divs[] =divHtml($dtype, $x, $y);       return true;
}

for($i = 0; $i < 10; $i ++) while (!reserve(2, rand(0,9), rand(0,5))) ; //adding 10 blocks of type2 (20cellsTotal)
for($i = 0; $i < 5; $i ++)  while (!reserve(3, rand(0,9), rand(0,5))) ; //adding  5 blocks of type3 (10cellsTotal)
for($i = 0; $i < 15; $i ++) while (!reserve(1, rand(0,9), rand(0,5))) ; //adding 15 blocks of type1 (15cellsTotal)
for($i = 0; $i < 60; $i ++) if (!$cells[$i]) reserve(4, $i%10, floor($i/10)) ; //filling rest 15 cells with type4
               //^go through all cells, but filling only 15

echo '<div style="position:absolute; width:1000px; height:600px;">';
   foreach ($divs as $single) echo $single;
echo '</div>';
?>