Разбиение сетки на 3 столбца после определенной точки
У меня есть блог WP с темой, основанной на F5 (Reverie). В настоящее время используется дочерняя тема для обработки пользовательских стилей и т. Д.
Кроме того, я использую 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>
content.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>
1 ответ
.row .small-12.columns#content article {
display: inline-block;
float: left !important;
min-height: 540px;
}