如何修復Div重疊？

-1

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

來源

2014-01-23 user3228036

可以添加類的對象？無論是自動生成頭寸是做不好的工作 –

只是爲了讓你知道，你不應該有一個像素的小數值 – Bobby

我想你需要保持絕對位置....出於某種原因，我想到了一個地圖與座標。你需要更好的JS功能來完成這項工作。 @KonstantinTarkus我不認爲這個問題是關於z-index的，我猜他想避免所有的重疊。 – DaniP

我瞭解你，我想你可以改變使用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'}) 
});

來源

2014-01-23 14:21:22 Rabih

http://jsfiddle.net/WswD3/11/ – Rabih

我很喜歡這個。它就像一個divs樓梯。 – BenM

有沒有一種方法可以做到這一點，只有重疊的div？例如如果2個div的'top'之間的差異小於10px，那麼將10px添加到頂部位置？ – user3228036

-1

我會提交此作爲評論（但不能到期缺乏代表）。按照Ravi所說的，我不會在像素中使用小數，而是使用帶有ems，rems和百分比的小數。

來源

2014-01-23 14:06:40 CheckeredMichael

使用Ravi的技術會導致更多的間距問題，請參閱我對他的回答的回覆，以及我已經做過的演示。 – BenM

-1

這裏一個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();

來源

2014-01-23 14:22:21 BenM

謝謝Rondles的答案，但我不想重新定位他們，因爲該網站是動態的，我不能硬編碼任何位置。 – user3228036

@ user3228036好吧。不完全確定你想實現什麼，因爲使用絕對位置本質上是用CSS來硬編碼的。如果你想出來，請在這裏發佈答案，因爲我有興趣看到你想要達到什麼，以及你是如何做到的。謝謝。 – BenM

如何修復Div重疊？

回答

相關問題