放置文本绝对不重叠答案

【问题标题】：Place text absolutely without overlapping放置文本绝对不重叠
【发布时间】：2015-01-12 20:55:53
【问题描述】：

我需要根据数组中的内容将文本放置在数组中。例如

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

15




overlapping 50
and 51 here





90

因为文本的字体大小大于单个像素。

有没有办法将元素放置在靠近其自然位置而不重叠的位置——在示例中，50 只上升一根头发，51 只下降一根头发，这样它们就不会重叠。

【问题讨论】：

编程中的“只是高一点”是什么意思？您需要知道字体大小、线条大小，然后它只是数学......我有点怀疑是否有一个预制库供您使用。

标签： php css overlap absolutelayout overlapping-matches

【解决方案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>";
}

这会检查所有先前值的距离。

【讨论】：

谢谢哈桑——这实际上改变了$stuff[$i]，我不想这样做——但我想我会在适当的地方编写一些这样的逻辑

【解决方案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>"; 

?>

更新：

这应该适合你：

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

?>

【讨论】：

感谢 Rizer —— 相对工作非常适合不重叠，但我没有得到我需要的位置——特别是我并排放置了 2 列，如果可能的话我想要相同的数字出现在 2 列中的相同位置。如果一个数组包含 5,10,15,20,50，而另一个数组包含 10,50，那么第一列中的 50 会因为相关标签而下降 4 个额外的位置。
@NevilleAga 更新了我的答案，所以它是绝对的，你可以有 2 列！我也检查一下是否是最小的。数字之间的差异是 15，如果不是我将 10 添加到值中

【解决方案3】：

所以我最终使用了一个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>"; 
}

【讨论】：