Wordpress循环输出带有奇怪CSS样式的帖子

我的wordpress循环以一种奇怪的格式输出帖子

当我有3篇帖子时，所有内容都是内联的。然而，现在当我有5篇文章时，它们以一种奇怪的方式显示（见附图）。箭头显示了我希望帖子的显示方式

下面是页面的html和php

<div class="container">
    <div class="row">
            <?php

               $args1 = array( 'post_type' => array('case_studies'), 'order' => 'DESC', 'posts_per_page' => 30, 'orderby' => 'date' );
               $loop = new WP_Query( $args1 );

               while ( $loop->have_posts() ) { 

               $loop->the_post();

               $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID));

            ?>

            <div class="col-sm-4">
                <a href="<?php the_permalink() ?>" class="blog_blocks">
                    <div class="b_image">
                        <img src="<?php echo get_the_post_thumbnail_url(); ?>"/>
                    </div>
                    <div class="b_h_sec">
                    <h2><?php the_title(); ?></h2>
                    <p><?php echo wp_strip_all_tags( get_the_excerpt(), true ); ?></p>
                    <span class="r_m">Read More</span>
                    </div>
                </a>
            </div>

            <?php } ?>

            <?php wp_reset_postdata(); ?>
    </div>
</div>

你可以在这里看到实际的页面——也许在Chrome工具中看到CSS会有所帮助

---

谢谢：）

这是因为这些块都有

浮动：left

，第三个块的高度比前一个稍低，所以第四个块也浮动在第二个块的左侧。这是浮动的本质

一种解决方案是使用固定的公共高度。另一种方法是将

clear:left

添加到第四个块中，但这没有响应-它将始终将该块移动到新行，即使有足够的空间容纳当前行

---

更安全的解决方案是在容器上使用

display:flex

，并添加

flex-wrap:wrap

这是因为这些块都有

float:left

，第三个块比前一个块略低，所以第四个块也在第二个块旁边向左浮动。这是浮动的本质

一种解决方案是使用固定的公共高度。另一种方法是将

clear:left

添加到第四个块中，但这没有响应-它将始终将该块移动到新行，即使有足够的空间容纳当前行

更安全的解决方案是在容器上使用

display:flex

，并添加

flex-wrap:wrap

在您的div上：

<div class="row">

享受！；）

在您的div上：

<div class="row">

享受！；）

.d-flex {
    display: flex;
    flex-wrap: wrap;
}