css - 使用自定义字段的 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 -->

我是文字出版社的新手。我想以 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>