Question

以下网站使用Genesis Framework和他们的孩子（如果重要的话），并且我对博客存档页面的网格布局遇到了一个奇怪的问题。

它正在跳过第二行的第一列。奇怪的是它不会在第二个/第三个/等上执行此操作。档案的页面。

更奇怪的是，它并没有在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

您需要使用min-height属性。按如下方式编辑CSS

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

这确保所有物品都具有最小高度设置，当一个物品大于另一个物品高度时会出现问题，这会占据其下方的区域。可以在style.css

上的line 881文件上进行此更改

CSS网格布局问题

1 个答案: