2017-02-28 181 views
0

以下網站使用Genesis框架和他們的孩子(如果它很重要),我得到一個奇怪的問題與博客歸檔頁面的網格佈局。CSS網格佈局問題

這裏是頁: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(); 

回答

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

+0

這似乎是修復!你是怎麼想出450px的? – Brett

+0

高度取決於你,但我只是選擇了450px,因爲間距看起來平均分佈,也因爲它的圓形數字:p(你可以根據需要編輯它,但不能低於最高高度) – Sphinx

+0

啊,好的。謝謝 – Brett