[Div/Css] 用CSS布局--像TABLE一样的图片列表样式

首先，我希望 可以自适应不同的宽度。使得单元格总是平均分布在一行当中。并且保持他们单元格的的样式。
1\首先需要确定的是 ，你的图片必须是 固定大小尺寸的。（这个不是什么大问题，现在很多服务器端的技术都可以很轻松的实现。从新定义用户上传图片的尺寸。）
2\你必须预先设定好 一行当中 放几张图片。
准备工作：
1、我准备了75×75 像素的图片作为 列表中 使用的 尺寸
2、我准备 是 在一行中 显示 4 张图片
3、最外面的 容器是 弹性的，自适应宽度。这样的话，设定宽度的时候就不能使用具体的 数值，而要改用百分比 或者其他 相对的 数值。
XHTML
引用内容：
<ul class="gallery">
<li><a href="#" title="Click for a bigger image"><img src="path/to/image/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
<li><a href="#" title="Click for a bigger image"><img src="path/to/image/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
.
.
.
Rinse and repeat for sixteen images
</ul>
CSS
引用内容：
.gallery{
margin:0; padding:0;
overflow:hidden; /* 清除浮动 */
width:100%; /* IE 和 老版本的 Opera 需要定义一个宽度*/
list-style:none;
}
.gallery li{
float:left;
display:inline; /*为了IE因而他双倍1% left margin */
width:23.8%;
margin:0 0 10px 1%; padding:10px 0;
height:83px; /* 高度=图片75px+上下各padding3px(6px)+上下边框各1px(2px)=83px*/
position:relative; /* 这个是关键*/
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; /* */
position:absolute; top:50%; left:50%; /* 这个设定使位置在这个元素当中居中对齐 */
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;
}
/* 这个是 可选择的 装饰效果*/
.gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}
正如你 看到的 一样，上面的 列子当中 使用了少量的 hack，这样是为了使得在不同的浏览器下，获得同样正确的显示。