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

发布时间:2007年02月12日      浏览次数:1451 次
首先,我希望 可以自适应不同的宽度。使得单元格总是平均分布在一行当中。并且保持他们单元格的的样式。
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,这样是为了使得在不同的浏览器下,获得同样正确的显示。
文章来源:http://www.divcss.cn/read.php/39.htm
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!