3列网格在某个点后断开答案

【问题标题】：3-column grid breaking after certain point3列网格在某个点后断开
【发布时间】：2014-02-25 15:08:48
【问题描述】：

我有一个基于 F5（Reverie）主题的 WP 博客。目前使用子主题来处理自定义样式等。

此外，我正在使用 Infinite Scroll（JetPack 插件的一部分）来管理主页和存档页面上的分页。

问题在第一组帖子（设置为 6）的初始加载时看起来不错。当我单击按钮触发无限滚动时，又加载了六个（看起来还不错）。加载另一个，3 列网格开始中断（失去浮动）。起初我认为这可能是用于帖子的图像。我什至尝试停用一些我认为可能有问题的插件；不走运。

我还尝试调整帖子的 css（高度，最小-最大），看看是否有帮助。不行。

home.php

<div class="row" id="content-home">
    <div class="small-12 columns" id="content" role="main">
        <h5 style="margin-left:15px;">Latest Posts</h5>
        <?php query_posts('offset=1'); ?>
        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>

            <?php else : ?>
                <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; // end have_posts() check ?>

    </div>
</div>

内容.php

<article id="post-<?php the_ID(); ?>" <?php post_class('index-card small-12 large-4 columns'); ?>>
<header>
    <a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?></a>        
</header>
<div class="entry-content">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php bvblog_small_meta(); ?>
</div>

【问题讨论】：

看起来我的性格不够用了。最后一个块的代码应该是<article id="post-<?php the_ID(); ?>" <?php post_class('index-card small-12 large-4 columns'); ?>> <header> <a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?></a> </header> <div class="entry-content"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php bvblog_small_meta(); ?> </div> </article>

标签： php html css wordpress zurb-foundation

【解决方案1】：

.row .small-12.columns#content article {
    display: inline-block;
    float: left !important;
    min-height: 540px;
}

【讨论】：