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

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]
这里的重点是不能给图片固定高度,而且原始的图片像素必须宽高一样。