親div内の要素のランダムな位置

Question

DIV内に浮動RANDOM要素があり、LEFTとTOPの位置が親<div class="main"></div>の中にあります。数学的にはJavaScript/jQueryの中でLEFTとTOP位置を計算し、設定するにはどのように任意のランダムな要素は、境界定義された親

HTMLを超えて行くことはありません。

<div class="main"></div> 

Javascriptを：

for (var i = 0; i < 5; i++) { 
    $('.main').append('<div class="box"></div>'); 
} 
$('.box').each(function(index) { 
    $(this).css({ 
    left : ((Math.random() * $('.main').width())), 
    top : ((Math.random() * $('.main').height())) 
    }); 
}); 

例：https://jsfiddle.net/iahmadraza/u5y1zthv/

ありがとうございます

Answer 1

.box要素はそうあなただけの可能なランダム値最大値からその次元を削除する必要があるものを達成するために、100px高さと幅に固定されています：

$(this).css({ 
    left: Math.random() * ($('.main').width() - $(this).width()), 
    top: Math.random() * ($('.main').height() - $(this).height()) 
}); 

Updated fiddle