好吧，这让我很生气，我不知道我做错了什么我有多个宽度为 350 像素，高度为 100 像素的 div，我想避免它们重叠......这是我目前拥有的代码但它们仍然重叠，我不知道我做错了什么
<html>
<head>
<title>WebWall</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.timeliner{
width: 350px;
height: 100px;
background: #eeeeee;
border-radius: 4px;
background: #f8faf9; /* Old browsers */
background: -moz-linear-gradient(top, #f8faf9 0%, #c1cdcc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8faf9), color-stop(100%,#c1cdcc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* IE10+ */
background: linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8faf9', endColorstr='#c1cdcc',GradientType=0 ); /* IE6-9 */
opacity: 0.9;
display: none;
position: absolute;
}
.timeline_title{
font-family: Arial;
font-weight: bold;
font-size: 18px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
}
.timeline_subtitle{
font-family: Arial;
font-weight: bold;
font-size: 13px;
color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.timeline_text{
font-family: Arial;
font-size: 12px;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
</style>
<script type="text/javascript">
var vert_array = new Array();
var hori_array = new Array();
function getRandomizer(a,b) {
var y = (Math.floor( Math.random()* (1+b-a) ) ) + a;
var check = checky(y); // 200
if(check==1){
return y;
}
else{
getRandomizer(a,b);
}
}
function getRandomizerx(a,b) {
var x = (Math.floor( Math.random()* (1+b-a) ) ) + a;
var check = checkx(x); // 200
if(check==1){
return x;
}
else{
getRandomizer(a,b);
}
}
function checky(y){
for(var i = 0; i<=vert_array.length;i++){
if(y>=vert_array[i] && y<=vert_array[i]+100){
return 0;
}
else{
return 1;
}
}
}
function checkx(x){
for(var i = 0; i<=hori_array.length;i++){
if(x>=hori_array[i] && x<=hori_array[i]-350){
return 0;
}
else{
return 1;
}
}
}
function slide_in(div){
var y = getRandomizer(100, 600);
document.getElementById(div).style.top = y + "px";
document.getElementById(div).style.display="block";
vert_array.push(y);
var x = getRandomizerx(1, 1000);
hori_array.push(x);
$("#" + div).animate({
left: x + "px"
},1200);
}
function init(){
vert_array.push(100);
hori_array.push(1);
slide_in('timeline_1');
setTimeout("slide_in('timeline_2')",2000);
setTimeout("slide_in('timeline_3')",4000);
}
</script>
</head>
<body onload="javascript: init();" style="background: #111111; background-image: url('http://newevolutiondesigns.com/images/freebies/hd-wallpaper-8.jpg');">
<div id="timeline_1" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="http://i1.ytimg.com/i/H-_hzb2ILSCo9ftVSnrCIQ/1.jpg?v=4f457758">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
<br>
<div id="timeline_2" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="http://i2.ytimg.com/i/y1Ms_5qBTawC-k7PVjHXKQ/1.jpg?v=b1e249">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
<div id="timeline_3" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="img/f###.png">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
</body>
页面加载时调用函数 init()