填補

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); 

它應該是這樣的