Wordpress цикл вывода сообщений со странным стилем CSS

Question

Мой цикл 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>

Фактическая страница, которую вы можете увидетьздесь здесь - может быть, вам помогут инструменты CSS в Chrome.

Спасибо :))

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.