如何在三列中显示wordpress帖子？

Question

似乎是一个愚蠢的问题，但我无法在三列中显示帖子。

我在引导程序中使用此代码，但我不能再使用了，因为它以某种方式破坏了我页面的其他部分。我不得不改变它。

<div class="row" style="margin-top:-30px">

    <?php 

        $count=0; 

        query_posts('posts_per_page=9'); 

        while (have_posts()) : the_post(); 

    ?>

    <div class="col-sm-4 blog-post thumb">

        <?php get_template_part('content-noticias', get_post_format()); ?>

    </div>

    <?php 

        $count++; 

        if($count == 3 || $count == 6 ) echo '</div><div class="row">';

        endwhile;

    ?>

</div>

它可以完成这项工作，但不再是因为这个。如何在没有引导程序的情况下在列中显示我的帖子？仅供参考，我的内容通知是：

<div class="noticias">

    <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a>

    <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

    <div><p><?php echo wp_trim_words( get_the_content(), 50 ); ?></p></div>

  </div>

</div>

Answer 1

嘿伙计，您可以使用 css 属性flex-flow: row wrap; 和子项，flex-basis: 33%;并且您的 post 循环中的任何项都将在 3 列中，并且您可以更改其他 mediaquery 的 flex 基础以在移动设备上更改 sie，例如，检查一下！.container {&nbsp; max-width: 1335px;&nbsp; margin: 0 auto;}.grid-row {&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; justify-content: flex-start;}.grid-item {&nbsp; height: 250px;&nbsp; flex-basis: 33%;&nbsp; -ms-flex: auto;&nbsp; width: 250px;&nbsp; position: relative;&nbsp; padding: 10px;&nbsp; box-sizing: border-box;&nbsp; background-color: #ededed;&nbsp; border: 1px solid white;}@media(max-width: 1333px) {&nbsp; .grid-item {&nbsp; &nbsp; flex-basis: 33.33%;&nbsp; }}@media(max-width: 1073px) {&nbsp; &nbsp;.grid-item {&nbsp; &nbsp; flex-basis: 33.33%;&nbsp; }}@media(max-width: 815px) {&nbsp; .grid-item {&nbsp; &nbsp; flex-basis: 33%;&nbsp; }}@media(max-width: 555px) {&nbsp; .grid-item {&nbsp; &nbsp; flex-basis: 100%;&nbsp; }}<div class='container'>&nbsp; &nbsp; <div class='grid-row'>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='grid-item'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="noticias">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="<?php the_permalink(); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?the_post_thumbnail();?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo wp_trim_words( get_the_content(), 50 ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

问题出在你的$count if陈述中：if($count == 3 || $count == 6 ) echo '</div><div class="row">'; <-- THIS WILL NEVER CLOSE你可以做的是：<div class="row" style="margin-top:-30px">&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; query_posts('posts_per_page=9');&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; while (have_posts()) : the_post();&nbsp;&nbsp; &nbsp; ?>&nbsp; &nbsp; <div class="col-sm-4 blog-post thumb">&nbsp; &nbsp; &nbsp; &nbsp; <?php get_template_part('content-noticias', get_post_format()); ?>&nbsp; &nbsp; </div>&nbsp; &nbsp; <?php endwhile;?></div>然后你可以使用 CSS 来确保你的列保持完整：.row .blog-post:nth-child(3n+1) {&nbsp; &nbsp; clear: left;}这将确保每第三个元素都会被清除，因此如果其中一列更长或更短，它不会弄乱布局。