Разместить текст абсолютно без перекрытия

Question

Мне нужно поместить текст в массив на основе содержимого в массиве. Например

<?php $stuff = array (5, 15, 50, 55, 90); 
for ($i=0; $i<5; $i++) { 
echo "<div style=position:absolute; top:$i"."px> $stuff[$i] </div>"; 
} 

выведет

5 

15 




50 
55 





90 

Что я и хочу, однако проблема заключается в элементы массива могут быть близко друг к другу, как 51 вместо 55 вместо:

$stuff = array (5,15,50,51,90); 

, который будет выводить

5 

15 




overlapping 50 
and 51 here 





90 

, так как размер шрифта текста больше, чем один пиксель.

Есть ли способ расположить элементы как можно ближе к их естественному пятну без перекрытия - в примере 50 поднимается только волосы, а 51 будет спускаться только с волосами, чтобы они не перекрывались.

Answer 1

ли что-то вроде этого:

$stuff = array (5, 15, 50, 55, 90); 
$limit = 5; 

for ($i=0; $i < 5; $i++) { 
    for($j=0; $j < $i; $j++) { 
     if (abs($stuff[$j] - $stuff[$i]) <= $limit) $stuff[$i] += $limit; 
    } 

    echo "<div style=position:absolute; top:" . $i . "px> " . $stuff[$i] . " </div>"; 
} 

Проверяется расстояние со всеми предыдущими значениями.

Answer 2

Вы можете использовать position: relative так:

<?php 

    $stuff = array (5, 15, 50, 51, 90); 

    foreach($stuff as $k => $v) 
     echo "<div style='position: relative; top:" . $v . "px;'>$stuff[$k]</div>"; 

?> 

Update:

Это должно работать для вас:

<?php 

    $stuff = array (5, 15, 50, 51, 90); 

    foreach($stuff as $k => $v) 
     echo "<div style='position: absolute; top:" . (($k >= 1) ? (($stuff[$k]-$stuff[$k-1] < 15) ? ($v+10) : "$v") : "$v") . "px;'>$stuff[$k]</div>"; 

    $stuff = array (5, 15, 50, 55, 90); 

    foreach($stuff as $k => $v) 
     echo "<div style='position: absolute; top:" . (($k >= 1) ? (($stuff[$k]-$stuff[$k-1] < 15) ? ($v+10) : "$v") : "$v") . "px; left: 30px'>$stuff[$k]</div>"; 

?> 

Answer 3

Так что я в конечном итоге, используя время цикла и приращение смещения пока пространство больше не занято.

$stuff = array (5, 15, 50, 51, 90); 
$z = array(); 
for ($i=0; $i<5; $i++) { 

$offset=0; 
while ((in_array($stuff + $offset,$z)) || (in_array($stuff[1] + 1 + $offset,$z)) ) { #this place already taken - assumes the text needs 2 px to display - adjust your math for your needs (I needed 8) 
$offset++; 
} 

$i = $i + $offset; 


#mark the spots as taken 
$z[] = $stuff + $offset; 
$z[] = $stuff + 1 + $offset;  


echo "<div style=position:absolute; top:$stuff[$i]"."px> $stuff[$i] </div>"; 
}