这是页面的HTML代码，包括其中的CSS样式调用：
<ul class="hoverbox">
<li>
<a href="#">
<img alt="description" src="img/photo01.jpg"/>
<img class="preview" alt="description" src="img/photo01.jpg"/>
</a>
</li>
</ul>
以下是关于图片相册的CSS代码：
//////CSS代码////
.hoverbox {
cursor:default
list-style-image:none
list-style-position:outside
list-style-type:none
}
.hoverbox a {
cursor:default
}
.hoverbox a .preview {
display:none
}
.hoverbox a:hover .preview {
display:block
left:-30px
position:absolute
top:-33px
z-index:1
}
.hoverbox img {
background:#FFFFFF none repeat scroll 0% 0%
border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187)
border-style:solid
border-width:1px
color:inherit
height:75px
padding:2px
vertical-align:top
width:100px
}
.hoverbox li {
background:#EEEEEE none repeat scroll 0% 0%
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204)
border-style:solid
border-width:1px
color:inherit
display:inline
float:left
margin:3px
padding:5px
position:relative
}
.hoverbox .preview {
border-color:#000000
height:150px
width:200px
}
你去试试看哦，就是这样的。
设置了float为left之后，必须要定义宽度，否则即使float，也会独占一行。即你看到的竖排的了。如果你想每行2张，就设置width:49.5%
3张 width:32.5%
……
依此类推，只要比 1/每行个数 少一点即可。
