css
Quote 原文：CSS gallery layout—smells like a table
翻译自：http://dnevnikeklektika.com/en/css-gallery-layout-en
译者的话：真的没有时间一字一句的翻译，将主要部分吧效果图
结构代码<ul class="gallery">
<li><a href="#" title="Klik za veu sliku"><img src="/UploadPic/2007-4/200741152031214.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
<li><a href="#" title="Klik za veu sliku"><img src="/UploadPic/2007-4/200741152031214.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
.
.
.
Rinse and repeat for sixteen images
</ul>
说明：虽然是简单的无序列表，却拥有4层嵌套，ul li a img,有这四层，基本就满足了你设计样式的拓展性。
样式CSS.gallery{
margin:0; padding:0;
overflow:hidden; /* Clears the floats */
width:100%; /* IE and older Opera fix for clearing, they need a dimension */
list-style:none;
}
.gallery li{
float:left;
display:inline; /* For IE so it doesn't double the 1% left margin */
width:23.8%;
margin:0 0 10px 1%; padding:10px 0;
height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
position:relative; /* This is the key */
background:url(45degree.png);
}
.gallery a,
.gallery img{
display:block;
width:100%;
}
a img{ border:none; } /* A small fix */
.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
padding:3px;
background:#eeefef;
width:75px; height:75px;
border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover{
border-color:#dfdfdf;
}
/* These are all optional, for decoration purpouses only */
.gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}
说明：注释文字已经说得很明白了，里面涉及的技术包括，清除浮动，已知宽度和高度元素的垂直居中，IE双倍补丁hack等。
这里是模型预览