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

Question

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

我在 Bootstrap 中使用这段代码，但我不能再这样做了，因为它以某种方式破坏了我页面的其他部分。我不得不改变它。

<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>

它会完成工作，但不再是因为那个。如何在没有 Bootstrap 的情况下在列中显示我的帖子？仅供引用，我的内容通知是:

<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%; 以及您在您的帖子循环将在 3 列中，您可以更改其他媒体查询的 flex 基础以在移动设备上进行更改，例如，检查一下!

.container {
  max-width: 1335px;
  margin: 0 auto;
}
.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  height: 250px;
  flex-basis: 33%;
  -ms-flex: auto;
  width: 250px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ededed;
  border: 1px solid white;
}

@media(max-width: 1333px) {
  .grid-item {
    flex-basis: 33.33%;
  }
}

@media(max-width: 1073px) {
   .grid-item {
    flex-basis: 33.33%;
  }
}

@media(max-width: 815px) {
  .grid-item {
    flex-basis: 33%;
  }
}

@media(max-width: 555px) {
  .grid-item {
    flex-basis: 100%;
  }
}

<div class='container'>
    <div class='grid-row'>
        <div class='grid-item'>
            <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>
        <div class='grid-item'>
            <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>
        <div class='grid-item'>
            <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>
        <div class='grid-item'>
            <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>
        <div class='grid-item'>
            <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>
        <div class='grid-item'>
            <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>
    </div>
</div>