Question

嗨，我在这里找不到任何可行的解决方案。我有一个使用CSS列的4列响应式图像网格，但只要有超过4个图像，它就会连续显示3个图像和侧面的空白区域。所有图像均为250x250。

.mainwrapper { 
  max-width: 1000px;
  margin: 0 auto;
  line-height: 0;
  -webkit-column-count: 4;
  -webkit-column-gap:   0px;
  -moz-column-count:    4;
  -moz-column-gap:      0px;
  column-count:         4;
  column-gap:           0px;
}

.mainwrapper img {
  width: 100% !important;
  height: auto !important;
}

HTML（wordpress）

query_posts('posts_per_page=24');
if (have_posts()) :
      while (have_posts()) : the_post();     

      echo '<a href="'; the_permalink(); echo '">';      
      echo '<div class="grid">'; 
      echo '<div class="gridtitle">'; the_title(); echo '</div>';           
      the_post_thumbnail("small-grid");
      echo '</div>';            
      echo '</a>'; 

      endwhile;      
else :  
endif;

什么是错的，拜托？

Answer 1

你的最大宽度为1000.如果添加了另一个img，宽度将为1250，因此该行将换行为2行，1为750px，1为500px。它的响应性。它不是空白，只是在下一行

CSS列无法正常工作

1 个答案: