WordPress的环路输出的帖子一个奇怪的CSS样式

Question

我的WordPress循环在一个奇怪的格式输出的职位。

当我有3个职位，一切都是直列。然而，现在，当我有5个职位，他们是在显示一种奇怪的方式（见附件图片）。箭头显示了我怎么想的岗位display.

这里是页面的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>

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

谢谢 ：）

Answer 1

在您的div：

<div class="row">

添加 “d-FLEX” 类：

<div class="row d-flex">

在d-FLEX类，添加此属性CSS：

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

请享用 ！ ;）

Answer 2

这是因为这些块都float: left，第三块是一点点比以前少了一个高，所以第四块也向左浮动旁边的第二个。这是在花车的性质。

一个解决方案是使用固定的普通高度。另一个办法是clear: left添加到第四块，但不响应 - 这将始终是块移动到新的生产线即使有足够的空间供其配合到当前行。

更安全的工作解决方案是在容器上使用display: flex，与flex-wrap: wrap增加。