CSS或JavaScript動態定位

我正在嘗試設置div元素沒有重疊，也喜歡這個CSS或JavaScript動態定位

有什麼辦法，我可以做到這一點在CSS或JavaScript？這個代碼中的我實際上使用了很多保證金。我認爲有更好的辦法做到這一點。你可以幫幫我嗎。

<div class='container'> 
     <div class='work1 round'></div> 
     <div class='work2 round'></div> 
     <div class='work3 round'></div> 
     <div class='work4 round'></div> 
     <div class='work5 round'></div> 
     <div class='work6 round'></div> 
     <div class='work7 round'></div> 
</div> 

.container { 
    width: 620px; 
    height: 400px; 
    margin: 0 auto; 
    background: rgba(200,200,200,1); 
} 

.round { 
    border-radius: 50%; 
} 

.work1 { 
    width: 80px; 
    height: 80px; 
    background: #ddd; 
    margin: 115px 0 0 270px; 
    position: absolute; 
} 
.work2 { 
    width: 75px; 
    height: 75px; 
    background: #ddd; 
    margin: 65px 0 0 140px; 
    position: absolute; 
} 
.work3 { 
    width: 55px; 
    height: 55px; 
    background: #ddd; 
    margin: 65px 0 0 80px; 
    position: absolute; 
} 

.work4 { 
    width: 90px; 
    height: 90px; 
    background: #ddd; 
    margin: 165px 0 0 193px; 
    position: absolute; 
} 

.work5 { 
    width: 77px; 
    height: 77px; 
    background: #ddd; 
    margin: 95px 0 0 213px; 
    position: absolute; 
} 

.work6 { 
    width: 20px; 
    height: 20px; 
    background: #ddd; 
    margin: 148px 0 0 213px; 
    position: absolute; 
} 

.work7 { 
    width: 28px; 
    height: 28px; 
    background: #ddd; 
    margin: 68px 0 0 213px; 
    position: absolute; 
}

來源

2014-04-30 Tukhsanov

你可以給元素'top'和'left'屬性設置它們的絕對位置......這可能比使用margin來達到這個目的更好。 – urish

仍然是我必須放置每個'div'元素的相同問題。 – Tukhsanov

你究竟想達到什麼目的？如果你只是想把它們放在一個接一個的位置而不重疊，刪除margin和'position：absolute'，或許給它們全部'display：inline-block;'或'float：left;' – urish

如果你正在尋找一個隨機生成那就試試這個CSS -

.container { 
width: 620px; 
height: 400px; 
margin: 0 auto; 
background: rgba(200,200,200,1); 
} 

.round { 
    border-radius: 50%; 
} 

.work { 
    background: #ddd; 
    position: absolute; 
}

這個JS -

var checkOverLap = function(circles, mTop, mLeft, radius){ 
    var x = mLeft + radius; 
    var y = mTop + radius; 
    for(var i = 0; i < circles.length; i++){ 
     var distance = Math.ceil(Math.sqrt(Math.pow(x - circles[i].x, 2) + Math.pow(y - circles[i].y, 2))); 
     if (distance < (radius + circles[i].radius)){ 
      //overlapped 
      return true; 
     } 
    } 
    return false; 
} 


$(function(){ 
    var cont = $(".container"); 
    cont.empty(); 
    var circles = []; 
    for(var i = 0; i < 10; i++){ 
     var div = $("<div>").addClass("work round"); 
     var w = Math.floor((Math.random() * cont.width()) + 1)/5; 
     var h = Math.floor((Math.random() * cont.height()) + 1)/5; 
     var mTop = Math.floor((Math.random() * (cont.height() - h)) + 1); 
     var mLeft = Math.floor((Math.random() * (cont.width() - w)) + 1); 
     var radius = w > h ? h/2 : w/2; 
     if(checkOverLap(circles, mTop, mLeft, radius)){ 
      i--; 
      continue; 
     } 
     $(div).css({ 
      width: w > h ? h : w, 
      height: w > h ? h : w, 
      marginTop: mTop, 
      marginLeft: mLeft, 
     }); 
     circles[circles.length] = {x:mLeft + radius, y:mTop + radius, radius: radius}; 
     cont.append(div); 
    } 
});

你可以隨機化更多，如果你喜歡。這裏是小提琴的鏈接 - http://jsfiddle.net/3paFX/5/

玩得開心！

來源

2014-04-30 08:08:46

。謝謝 – Tukhsanov

@Tukhsanov如果你發現有用的答案，請接受它 – urish

CSS或JavaScript動態定位

回答

相關問題