CSS网格布局问题

Question

以下网站使用Genesis框架和他们的孩子（如果它很重要），我得到一个奇怪的问题与博客归档页面的网格布局。

这里是页：https://foralles.com/community/

它跳过第二行的第一列。奇怪的是，它没有在第二/第三/等这样做。档案页面。

更进一步的奇怪，它不是在Chrome中这样做，而是在FF，Safari和IE中。

我已经删除了空列之前和之后的帖子，没有任何更改。

直到最近还没有发生这种情况，我不确定发生了什么变化。

鉴于它在Chrome中的工作，并在随后的归档页面让我觉得这是一些CSS问题，但我无法弄清楚...任何帮助将不胜感激。

这里是我的代码：

<?php 

/** 
* Template Name: Blog 
* This is your custom Archive page for the Swank Theme. 
*/ 

//* Show page content above posts 
add_action('genesis_loop', 'genesis_standard_loop', 5); 

//* Add the featured image after post title 
add_action('genesis_entry_header', 'foralles_grid'); 
function foralles_grid() { 

    if (has_post_thumbnail()){ 
     echo '<div class="archive-featured-image">'; 
     echo '<a href="' . get_permalink() .'" title="' . the_title_attribute('echo=0') . '">'; 
     echo get_the_post_thumbnail($thumbnail->ID); 
     echo '</a>'; 
     echo '<a href="' . get_permalink() .'" title="' . the_title_attribute('echo=0') . '">'; 
     echo the_title('<h2>', '</h2>'); 
     echo '</a>'; 
     echo '</div>'; 
    } 

} 

//* Remove the ad widget 
remove_action('genesis_before_loop', 'adspace_before_loop'); 

//* Remove author box 
remove_action('genesis_after_entry', 'genesis_do_author_box_single', 8); 

//* Remove the post meta function 
remove_action('genesis_entry_footer', 'genesis_post_meta'); 

//* Remove the post info function 
remove_action('genesis_entry_header', 'genesis_post_info', 12); 

//* Force full width content layout 
add_filter('genesis_pre_get_option_site_layout', '__genesis_return_full_width_content'); 

//* Remove the entry title (requires HTML5 theme support) 
remove_action('genesis_entry_header', 'genesis_do_post_title'); 

//* Remove the post content 
remove_action('genesis_entry_content', 'genesis_do_post_content'); 

//* Add Page Heading and Content 
add_action('genesis_before_loop', 'community_heading'); 
function community_heading() { 
?> 
<h1>Community</h1> 
<p>We built our Community page to share ideas, stories and inspiration. We’re sure you will find something that interests you and connects you to For Alles. Please enjoy exploring and reading. If there is anything you would like us to know please <a href="http://www.foralles.com/contact">contact us</a>. We’d love to hear what you think!</p> 
<?php 
} 

genesis(); 

Answer 1

您需要使用的最小高度属性。编辑CSS如下

.page-template-page_blog article.type-post, .archive article.type-post { 
    width: 33.33%; 
    float: left; 
    min-height: 450px; 
} 

这可以确保所有的文章有一个最低高度设定，当一个项目是更大然后另一个高度明智的，这占据了它下面的区域问题就出现了。此更改可在style.css文件上进行line 881