Wordpress с использованием настраиваемых полей

Question

<div class="row main_content">
                    <div class="col-lg-3 col-md-4  col-sm-6 ">
                            <div class="center-text mb-30">
                                    <div class="ïmg-200x mlr-auto pos-relative best_seller">
                                            <h6 class="ribbon-cont"><div class="ribbon primary"></div><b>OFFER</b></h6>
                                            <?php
                                            // check if the repeater field has rows of data
                                            if( have_rows('best_seller') ):
                                                // loop through the rows of data
                                                while ( have_rows('best_seller') ) : the_row();  ?>                                                       
                                                    <?php 
                                                    $image = get_sub_field('item_image');
                                                    if( !empty( $image ) ): ?>
                                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" 
                                                                alt=""  height="100px";  width="100px";/>
                                                    <?php endif; ?>                                             

                                    </div>
                                    <h5 class="mt-20"><?php echo the_sub_field('item_name'); ?></h5>
                                    <h4 class="mt-5"><b><?php echo the_sub_field('item_price'); ?> </b></h4>
                                    <h6 class="mt-20"><a href="#" class="btn-brdr-primary plr-25"><b>Order Now</b></a></h6>

                                    <?php
                                endwhile;
                                else :
                                     echo "no rows found";
                                endif;                                                                ?>
                            </div><!--text-center-->
                    </div><!-- col-md-3 -->


            </div><!-- row -->

Я новичок в Word Press. Я хочу отображать данные в 2 строки и 4 столбца. И данные поступают из настраиваемых полей Word Press. Мне нужен вывод, как в этом стиле Как выровнять данные? введите описание изображения здесь

Answer 1

Не видя кода, трудно сказать, что у вас после, но вот 2 строки по 4 элемента:

.rowWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rowItem {
  width:calc(25% - 30px);
  padding:15px;
}
.innerStyling {
  border:1px solid #eee;
  padding:15px;
}

<div class="rowWrapper">
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
  <div class="rowItem">
    <div class="innerStyling">
      Wordpress item
    </div>
  </div>
</div>