Question

I am tried to use PHP to make DIV random positions. Here is my code.

<?php
function DIV1()
{
    $choose = array("left", "right");
    $rand_keys = array_rand($choose, 1);
    echo "<div class=position1 style=\"float:left;width:100px;height:100px;background-color:#00f;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}
function DIV2()
{
    $choose = array("left", "right");
    $rand_keys = array_rand($choose, 1);
    echo "<div class=position2 style=\"float:left;width:100px;height:200px;background-color:#f00;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}
function DIV3()
{
    $choose = array("left", "right");
    $rand_keys = array_rand($choose, 1);
    echo "<div class=position3 style=\"float:left;width:200px;height:100px;background-color:#ff0;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}

echo '<div id="display" style="width:1016px;height:1016px;background-color:#333;">';
    $count = Math.floor(rand()*25) +15;
    for ($i=0; $i<$count; $i++)
    {
        echo DIV1();
        echo DIV2();
        echo DIV3();
    }

echo '</div>';
?>

My code can mixed divs position. But I have 2 questions.

1. How to control 15 pieces 100*100, 10 pieces 100*200, 5 pieces 200*100 divs mixed random display?

2. How to control the white space part? I want show all the divs in the display zone. width:1016px;height:1016px;, do not out of the div#display.

Answer 1

$sizes = array();

for ($i = 0; $i < 15; $i++) {
    array_push($sizes, $array(100,100));
}
for ($i = 0; $i < 10; $i++) {
    array_push($sizes, $array(100,200));
}
for ($i = 0; $i < 5; $i++) {
    array_push($sizes, $array(200,100));
}

for ($i = 0; $i < 30; $i++) {
   // Use array_rand() to pick out a random entry from $sizes and echo the div
}

About it not being out of the boundaries, just have it get a random top and left within those boundaries taking into account the width and height of the div.