JS Div重疊

好吧，這是殺了我，我無法弄清楚我在做什麼錯我有多個div寬度爲350px，高度爲100px，我想避免它們重疊... This是我目前擁有的代碼，但他們仍然是重疊的，我不知道我做錯了JS 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（）被調用時，頁面加載

來源

2012-05-28 Lennart Hase

你能提供相關的HTML和CSS嗎？ –

更新了:)這是整個文件 –

我從此創建了一個jsFiddle，但我不知道目標是什麼。 http://jsfiddle.net/pZUbY/ – Hemlock