随身笔记
随身笔记

css 响应适图片列表

现在都流行响应适布局,其中响应适图片列表的css样式布局还是有一定的技巧的,效果就是3张图片会随着窗口的大小变化而变化。

big_pic

HTML:

[code]<div class=”pic_hang”>
<div class=”pic_dan”>
<a href=””><img src=”images/001.jpg”></a>
</div>
<div class=”pic_dan”>
<a href=””><img src=”images/002.jpg”></a>
</div>
<div class=”pic_dan”>
<a href=””><img src=”images/003.jpg”></a>
</div>
</div>[/code]

CSS:

[code].ui-content{ padding:0;}
.pic_hang{ clear:both;}
.pic_hang .pic_dan{float:left;width:33.3333333333%;}
.pic_hang .pic_dan a{ display:block; margin:5px; border: 1px solid #3c3c3c;}
.pic_hang .pic_dan a img{ width:100%; display:block;}[/code]

这里的重点是不能给图片固定高度,而且原始的图片像素必须宽高一样。

随身笔记

css 响应适图片列表
现在都流行响应适布局,其中响应适图片列表的css样式布局还是有一定的技巧的,效果就是3张图片会随着窗口的大小变化而变化。 HTML: [code]<div class="pic_hang"> <…
扫描二维码继续阅读
2014-01-12