Домашняя страница Loop Somehow Breaks Styling Post Grid

Я испытываю что-то действительно странное, что я просто не могу понять. Я занят написанием собственной темы. Это ничего особенного или супер продвинутого, просто хотел провести забавный проект и получить небольшой обычай.

На домашней странице я хочу, чтобы сообщения отображались в стиле кладки, пользовательский интерфейс pinterest clone. Я создал HTML и CSS, используя Foundation. Все работает на 100%, как и предполагалось, до того, как я использую цикл WP для вывода сообщений.

Вот как это выглядит, когда я жестко программирую HTML:

Жесткий код HTML

Вот как это выглядит, когда я использую цикл WP, чтобы вытащить его из content.php:

С WP Loop

Я также перемещал содержимое content.php внутри цикла на index.php, и я получаю ту же проблему. Не могу понять это.

Код домашней страницы:

<?php get_header(); ?> <div class="row" id="content"> <div class="medium-9 columns"> <article> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content' ); endwhile; else : echo wpautop( 'Sorry, no posts were found' ); endif; ?> </article> </div> <?php get_sidebar(); ?> </div><!-- End row--> 

Код содержания:

 <section class="animated fadeIn"> <div class="ribbon"><span>Eat This</span></div> <img src="<?php echo the_post_thumbnail(); ?>" /> <h1><?php the_title(); ?></h1> <p><?php the_content(); ?></p> <div class="cats-block"> <?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo '<span class="category label">' . $tag->name . '</span> '; } } ?> </div> 

CSS:

 .bob article { -moz-column-width: 13em; -webkit-column-width: 13em; column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; } .bob section { position: relative; display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #E5E5E5; border-radius: 5px; } 

Немного расстроен. Любая помощь приветствуется.

Solutions Collecting From Web of "Домашняя страница Loop Somehow Breaks Styling Post Grid"

Я предположил, что у вас есть статическая страница, работающая хорошо, прежде чем вы нарезаете ее и превратите ее в тему WordPress.

У меня была та же проблема, но мне удалось это решить, сделав несколько советов:

  • Проверьте разрез элемента, который вы собираетесь на цикл. Только зациклируйте элемент сообщения. Возможно, вы пропустили некоторые элементы div, включенные в цикл.

возможно, попробуйте это:

 <?php get_header(); ?> <div class="row" id="content"> <div class="medium-9 columns"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content' ); endwhile; else : echo wpautop( 'Sorry, no posts were found' ); endif; ?> </div> <?php get_sidebar(); ?> </div><!-- End row--> 

Код содержания:

 <article> <section class="animated fadeIn"> <div class="ribbon"><span>Eat This</span></div> <img src="<?php echo the_post_thumbnail(); ?>" /> <h1><?php the_title(); ?></h1> <p><?php the_content(); ?></p> <div class="cats-block"> <?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo '<span class="category label">' . $tag->name . '</span> '; } } ?> </div> </section> </article> 

Проблема была не в WP или Foundation, а в количестве сообщений, которые я показывал. Более 3, фактически построить макетную раскладку сетки и заставляет столбцы выстраиваться рядом друг с другом.