为什么层的布局滚动无效，换成Table的布局又可以了

Question

//Table的布局，可以
<div id="scroll" style="overflow:hidden;width:570px;color:#ff0000;">
                <table align="left" cellpadding="0" cellspacing="0" border="0">
                <tr><td id="scroll1" valign="top">
                  <table border="0" cellpadding="0" cellspacing="0">
                      <tr>                      
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_17223378.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17223378.jpg" alt="1q" width="120" height="90" ></a>
                          </td>
                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_172219468.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172219468.jpg" alt="1" width="120" height="90" ></a>
                          </td>
                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_17228250.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17228250.jpg" alt="1" width="120" height="90" ></a>
                          </td>                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_172150984.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172150984.jpg" alt="1" width="120" height="90" ></a>
                          </td>
                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_172129593.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172129593.jpg" alt="1" width="120" height="90" ></a>
                          </td>
                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_172118218.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172118218.jpg" alt="1" width="120" height="90" ></a>
                          </td>                        
                          <td style="padding-left: 20px;"><a href="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_17211875.jpg" target="_blank">
                            <img border="0" src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17211875.jpg" alt="1" width="120" height="90" ></a>
                          </td>
                        
                      </tr>
                  </table>
                  </td><td id="scroll2" valign="top"></td></tr></table>
                  <div id="divScrollScript">
                      <script type="text/javascript">
                          var speed=10;  //速度数值越大速度越慢 
                          var scroll = document.getElementById("scroll");
                          var scroll1 = document.getElementById("scroll1");
                          var scroll2 = document.getElementById("scroll2");
                          scroll2.innerHTML=scroll1.innerHTML;
                          function Marquee(){
                          if(scroll2.offsetWidth-scroll.scrollLeft<=0)
                          scroll.scrollLeft-=scroll1.offsetWidth;
                          else{
                          scroll.scrollLeft++;
                          }
                          }
                          var MyMar=setInterval(Marquee,speed)
                          scroll.onmouseover=function() {clearInterval(MyMar)}
                          scroll.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
                      </script>                  </div>
                 </div>
 
 
//层的布局，无效  
<DIV id=demo_1 style="OVERFLOW: hidden; HEIGHT: 136px">
<DIV id=demo1_1>
<div id=gleft>
<a href=""><img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17223378.jpg" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_17228250.jpg" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17228250.jpg" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172118218.jpg" border="0" width=150 height="120"/></a>
</div>
</DIV>
<DIV id=demo2_1></DIV></DIV><SCRIPT>
var speed=25
var demo = document.getElementById("scroll");
                          var demo1 = document.getElementById("scroll1");
                          var demo2 = document.getElementById("scroll2");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>

Answer 1

<div id="demo_1" style="overflow: hidden; height: 136px">
    <div id="demo1_1">
        <div id="gleft">
            <a href="">
                <img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17223378.jpg"
                    border="0" width="150" height="120" /></a>
        </div>
        <div id="gleft">
            <a href="">
                <img src="http://fileserver1.17ilife.com/blog/pictures/old/2010-8-6/201086_17228250.jpg"
                    border="0" width="150" height="120" /></a>
        </div>
        <div id="gleft">
            <a href="">
                <img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_17228250.jpg"
                    border="0" width="150" height="120" /></a>
        </div>
        <div id="gleft">
            <a href="">
                <img src="http://fileserver1.17iLife.com/Blog/Pictures/Small/2010-8-6/201086_172118218.jpg"
                    border="0" width="150" height="120" /></a>
        </div>
    </div>
    <div id="demo2_1">
    </div>
</div><script>
var speed=25
var demo = document.getElementById("demo_1");
var demo1 = document.getElementById("demo1_1");
var demo2 = document.getElementById("demo2_1");
demo2.innerHTML=demo1.innerHTML
function Marquee() {
    if (demo2.offsetHeight - demo.scrollTop <= 0)
        demo.scrollTop -= demo1.offsetHeight
    else {
        demo.scrollTop++
    }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>

Answer 2

用纯JS想向左或右滚动得用TABLE布局，当然用DIV也可以，但比较麻烦，建议使用JQUERY来实现。