Question

我有一个X个div的情况如下：

"<div style="position: absolute; left: 327.507px; top: 42.3433px;" class="point-label">25.49</div>
<div style="position: absolute; left: 323.738px; top: 60.8532px;" class="point-label">21.04</div>
<div style="position: absolute; left: 322.821px; top: 64.6363px;" class="point-label">20.14</div>"
.
.
.

他们有自动生成的固定位置，我对此无能为力。问题有时是重叠，请看这里的示例：http://jsfiddle.net/Rawand/WswD3/

问题是：CSS可以解决重叠吗？否则通过javascript？我希望它们可以放在其他位置上，并且可以进行最小的位置更改，如图像链接所示：i.stack.imgur.com/xbqHI.jpg

Answer 1

据我所知，我猜你可以使用Jquery改变DIV的位置

例如设置一个类'p1'

<div style="position: absolute; left: 327.507px; top: 42.3433px;" class="point-label p1">25.49</div>

然后：

$('.p1').each(function(){
    $(this).next('div').css({'left' : parseInt($(this).css('left')) + parseInt($(this).css('width')) + 'px'})
});

Answer 2

我会将此作为评论提交（但由于缺乏代表而无法提交）。按照Ravi的说法，我不会使用像素的小数，而是使用带有ems，rems和百分比的小数。

Answer 3

这是一个javascript解决方案来排队。它不是特别优雅，可以在jQuery中以更简单的方式完成，但它会阻止它们重叠并使它们有些统一。

http://jsfiddle.net/WswD3/7/

function removeAtt(){
    var elems = document.getElementsByClassName("point-label");

    for(i in elems){
        elems[i].removeAttribute("style");
        elems[i].style.position = "relative";
        elems[i].style.left = "323px";
    }
}

removeAtt();

如何修复Div重叠？

3 个答案: