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

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

будет выводить

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

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

который бы вывел

5

15overlapping 50
and 51 here
90

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

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

1

absolutelayout css overlap overlapping-matches php

Решение

Другие решения

Вы могли бы использовать 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>";

?>

Обновить:

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

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

?>

0

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

$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>";
}

0

Источник

Accepted Answer

Сделайте что-то вроде этого:

$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>";
}

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

0