填补

Question

之间的差距我喜欢有人给我提示，我可以填补网格视图列表的空白。 下面我插入了我所有的CSS更改。仍然无法弄清楚填补国内空白......

网格我谈论i'ts在主页底部在：

http://findout-macau.com

#content .category_grid_view li p.timing { margin:0; padding:0; } 
#content .category_grid_view li p.timing span { color:#000; } 

#page .category_grid_view { 
width: auto; 
padding-left:0px; 
} 
#content .category_grid_view { 
margin:-10 0 20px -15px; 
padding:0; 
width:650px; 
clear:both; 
} 
#content .category_grid_view li a.post_img { 
height:auto; 
width:100%; 
overflow:hidden; 
padding:1%; 
} 
#content .category_grid_view li a.post_img img { 
margin:0 auto; 
display:block; 
height:auto; 
} 
#content .category_grid_view li { 
background: none repeat scroll 0 0 transparent; 
float: left; 
list-style: none outside none; 
margin: -10 0 20px; 
padding: 0 0 0 15px; 
position: relative; 
width: 140px; 
} 
#content .category_grid_view li.hr { 
display: none; 
} 
#content { 
float: left; 
overflow: hidden; 
padding-left: 5px; 
width: 640px; 
} 
#content .category_grid_view li a.post_img { 
display: block; 
margin-bottom: 0; 
padding: 0; 
background: none repeat scroll 0 0 #FFFFFF; 
border: 0 solid #E2DFDF; 
box-shadow: 0 0 0 #DDDDDD; 
height: auto; 
width: 100%; 
overflow: hidden; 
} 
#content .category_grid_view li a.post_img img { 
height: auto; 
overflow: hidden; 
width: 100%; 
} 
#content .category_grid_view li.featured { 
position:relative; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
} 
#content .category_grid_view li .featured_img { 
width:69px; 
height:72px; 
position:absolute; 
left:15px; 
top:0px; 
text-indent:-9009px; 
} 
#content .category_grid_view li.featured a.post_img { 
border: 0 solid #B1D7E0; 
} 
#content .category_grid_view li .widget_main_title { 
padding-top: 7px; 
clear: left; 
height: 25px; 
overflow: hidden; 
background: none repeat scroll 0 0 #EBEBEB; 
} 
#content .category_grid_view li .rating { 
background: none repeat scroll 0 0 #EBEBEB; 
display: block; 
margin: 0px 0; 
padding-bottom: 7px; 
padding-top: 7px; 
} 
#content .category_grid_view li p.review { 
background: none repeat scroll 0 0 #EBEBEB; 
border-bottom: 10px solid #EBEBEB; 
border-top: 1px solid #EBEBEB; 
color: #EBEBEB; 
margin-bottom: 20px; 
padding: 5px 0; 
} 

Answer 1

的问题是与图像高度。

如果设置

#content .category_grid_view li a.post_img img { height: 97px } 

网格视图显示良好，但图像看起来失真。

尝试调整图像大小，使其看起来很好，并保持高度为97px。

编辑

@ Bdalte的评论

尽量把每一个元素/产品放入一个div（让我们用类包装说），并用最大高度您从要素获取设置高度/产品。 基于Find out divs height and setting div height 你可以使用这个脚本

var maxHeight = 0; 
$('div.wrapper') 
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) 
    .height(maxHeight); 

它应该是这样的