【CSS】ProductView.CSS|ArticleView.CSS示范

admin

一、一行两列
#ArticleView li,#ProductView li{ float:left; width:150px; height:180px; margin-right:20px; position:relative; overflow:hidden;}
#ArticleView li:nth-child(2n),#ProductView li:nth-child(2n){ margin-right:0;}
#ArticleView .thumbs,#ProductView .thumbs{ width:100%; height:126px; display:block; overflow:hidden;}
#ArticleView .thumbs a,#ProductView .thumbs a{ float:left; display:block; width:100%;}
#ArticleView img,#ProductView img{ width:100%; height:126px;}
#ArticleView li .atext,#ProductView li .atext{ display:block; text-align:center; line-height:32px; white-space:nowrap; overflow:hidden; text-overflow;ellipsis; position:relative; z-index:100;}
#ArticleView li:hover .atext,#ProductView li:hover .atext{ display:block; text-align:center; background:#ccc;}
#ArticleView li .thumbs{ display:block; height:126px;}
#ArticleView li .atext{ float:none; display:block; text-align:center; position:inherit;}

二、一行一列，带边框阴影
#ProductView li,#ArticleView li{ float:left; width:258px; height:232px; text-align:center; margin:10px; margin-bottom:30px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView .thumbs,#ArticleView .thumbs{ display:block;}
#ProductView .thumbs a,#ArticleView .thumbs a{ display:table-cell; width:258px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img,#ArticleView img{ max-width:258px; max-height:192px;}
#ProductView .atext,#ArticleView .atext{ display:block; line-height:30px;}

admin

#ArticleView li,#ProductView li{ float:left; width:47%; height:180px; margin-left:2%; position:relative; overflow:hidden;}
#ArticleView li:nth-child(2n),#ProductView li:nth-child(2n){ margin-right:2%;}
#ArticleView .thumbs,#ProductView .thumbs{ width:100%; height:136px; display:block; overflow:hidden;}
#ArticleView .thumbs a,#ProductView .thumbs a{ float:left; display:block; width:100%;}
#ArticleView img,#ProductView img{ width:100%; height:136px;}
#ArticleView li .atext,#ProductView li .atext{ display:block; text-align:center; color:#fff; line-height:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; z-index:100;}
#ArticleView li:hover .atext,#ProductView li:hover .atext{ display:block; text-align:center; color:#fff;}
#ArticleView li .thumbs{ display:block; height:136px;}
#ArticleView li .atext{ float:none; display:block; text-align:center; position:inherit;}

缺点：固定高度，需根据客户图片内容稍作调整，图片不能按长宽比自适应，可能会有变形，对网管要求较高。