[問題] 如何將右邊選單效果的呈現改變

[cgcat (小綿羊趕集)]

我在網路上學相簿的效果

它的呈現是這樣

http://bbs.blueidea.com/thread-2649250-1-1.html

但我想要自己變成
左邊小圖的選項不是以overflow一條直線的呈現
而是
5個5個一列的方式

我的想法應該是改原始檔裡面的
#zs的部分
將overflow:auto;去掉應該會以高度去變化
多的會跳到下一列去
但是這樣去掉之後
他便會超過我所寫的infor部分

所以我應該更改哪個一部分才對呢?
非常感謝!!

附上

html

<div id="info">
  <h3>文字</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" ><span><img src="demo2_08.jpg" alt="抒覇1" /><br />
        <p class="aa">文字</p>
                </span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank"><span><img src="images/a2.jpg" alt="抒覇2" /><br />
        文字<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank"><span><img
        文字<br />
        www.zishu.cn</span></a></li>
<li><a href="http://www.zishu.cn" class="b2 z" target="_blank"><span><img
        文字<br />
        www.zishu.cn</span></a></li>

    </ul>
  </div>
</div>

css

body{
        margin:0;
        padding:0;
        font-size:12px;
        background:#333333;
        line-height:1.7;
        font-family:Verdana, "摰鲸붓";
        overflow:hidden ;/* ie 無效 */
        }
#info{
        width:600px;
        background: #666666;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        border:1px solid #FFFFFF;
        height:450px;
        margin-top:20px;
        }
h3{
        margin:30px 0 0 0;
        color:#CC0000;
        font-size:12px;
        color:#FFF;
        }
span{/* 將出現的圖隱藏起來*/
        visibility:hidden;
        position:absolute;
        overflow:hidden;
        }
ul{
        list-style:none;
        margin:0;
        padding:0;
        }
li a:hover{
        cursor:pointer;/*有來解除z-index造成的bug*/
        }
li a:hover span { /* 大圖出現的位子*/
        position:absolute;
        top:90px;
        z-index:20px;
        visibility: visible;
        margin-left:-500px;
        }
#info img{ /* infor裡面圖的尺寸*/
        width:400px;
        height:280px;
        border:7px solid #FFFFFF;
        }
#zs{  /*们右邊小圖拉霸的部分*/
        height:340px;
        overflow:auto;
        width:140px;
        float:right;
        margin-top:20px;
        margin-bottom:50px;
        border:1px solid #000;
        }
.z{ /* 小圖顯示的效果*/
        width:80px;
        height:56px;
        display:block;
        border:1px solid #FFFFFF;
        margin:4px 0 4px 25px;
        }
.aa {
        margin-top:10px;
        background-color:#fff;
        width:415px;
        height:25px;
        padding-top:5px;
        }
.b1{ background-image:url(demo2_08.jpg)}
.b2{ background:url(images/b2.jpg)}
.b3{ background:url(images/b3.jpg)}
.b4{ background:url(images/b4.jpg)}
.b5{ background:url(images/b5.jpg)}
.b6{ background:url(images/b6.jpg)}
</style>

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 60.248.141.208