求助！如何显示多行排列的图片[Javascript]

新手求教，用jquery写一排水平图片可以，如何写多行呢？ 只能对一个div块起作用，后面的块就不起作用了，怎么改呢？ 谢谢了
js:
$(document).ready(function(){
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next;
for (i=0;i<imgs;i++){
next=$pic.eq(i);
next.css({'position': 'absolute', 'left':150+200*i,'top':25 } );
next.show();
}
});
css:
<div id="aa">
<div id='images'>
<a><img src="image/z1.jpg" width=160px height=160px/></a>
<a><img src="image/z2.jpg" width=160px height=160px/></a>
</div>
</div>
<div id="bb">
<div id='images'>
<a><img src="image/x1.jpg" width=160px height=160px/></a>
<a><img src="image/x2.jpg" width=160px height=160px/></a>
</div>
</div>

解决方案 »

  1.   

    你是不是用IE测的
    修改这两处你再看看效果
    var $pic = $('.images a')
    把两处id='images' 换为 class='images'
    id是不许重复的
      

  2.   

    多排并列，不就是个宽度设置呀，没你搞的那么复杂。你平时用css怎么定义，这里也怎么定义就是了
    <script>
    $(function(){
        $('#images').css("width","330").parent().css("width","330")
    }); 
    </script>
    <div id="aa">
    <div id="images">
    <a><img src="image/z1.jpg" style="width:160px;height:160px"/></a>
    <a><img src="image/z2.jpg" style="width:160px;height:160px"/></a>
    </div>
    </div>
    <div id="bb">
    <div id="images">
    <a><img src="image/z1.jpg" style="width:160px;height:160px"/></a>
    <a><img src="image/z2.jpg" style="width:160px;height:160px"/></a>
    </div>
    </div>
      

  3.   

    谢谢1L, 不过这样改了，第二个div的图片就不是从一开始排了，怎么改呢
      

  4.   

    汗~~怎么老是碰这么问问题的。你这种情况，一开始提问就应该说清楚，而不是等别人回答了你，你又来了新的问题。真是有点伤不起了,注意了：你的id="images"被我改成了class="images"
    <script  type="text/javascript">
    $(function(){
        $('.images a').css({"float":"left"});
        $('.images').each(function(){
            var w=0;
            $(this).find("a").each(function(){
                w+=$(this).width();
            })
            $(this).css({"width":w}).parent().css({"width":w});
        })
    }); 
    </script>
        <div id="aa">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/4.jpg" style="width:80px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:170px;height:160px"/></a>
            </div>
        </div>
        <div id="bb">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/3.jpg" style="width:380px;height:160px"/></a>
            </div>
        </div>
        <div id="cc">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
            </div>
        </div>
      

  5.   

    <script type="text/javascript">
    $(function(){
        $('.images a').css({"float":"left"});
        $('.images').each(function(){
            var w=0;
            $(this).find("a").each(function(){
                w+=$(this).width();
            })
            $(this).css({"width":w}).parent().css({"width":w});
        })
    }); 
    </script>
        <div id="aa">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/4.jpg" style="width:80px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:170px;height:160px"/></a>
            </div>
        </div>
        <div id="bb">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/3.jpg" style="width:380px;height:160px"/></a>
            </div>
        </div>
        <div id="cc">
            <div class="images">
                <a><img src="b/1.jpg" style="width:160px;height:160px"/></a>
                <a><img src="b/2.jpg" style="width:160px;height:160px"/></a>
            </div>
        </div>