使用php循环WordPress的响应框布局

Question

I'm displaying 4 coupons in a single row. Some coupons don't have description, expiry date etc but I need all coupons to be of the same size.

I tried to apply different CSS Snippets but I couldn't make them of same size. I also play around PHP code scripts but hard luck.

function clipmydeals_display_grid_coupon($id) {
<article id="coupon-grid-<?php echo $id; ?>"<?php post_class('card '.get_post_meta($id, 'cmd_type', true)); ?>>

<div class="card-body" style="z-index:2;">
<?php if(!empty(get_post_meta($id, 'cmd_valid_till', true)))
 { ?>

<div class="badge badge-<?php echo $validity_color; ?>">
 <?php 
echo __('Ends ','clipmydeals').' '.date("jS F Y",strtotime(get_post_meta($id, 'cmd_valid_till', true))); ?>

</div>
<?php } ?>



    <div>
    <?php
    if ( is_single($id) or get_theme_mod('coupon_page','yes')=='no') :
    ?>
    <h3 class="card-title text-center mt-0 pb-0">
     <?php echo get_the_title($id); ?></h3>
    <?php
    else :
    ?>

    <h3 class="card-title text-center mt-0 pb-0">
   <a href="<?php echo esc_url( get_permalink($id) ); ?>" rel="bookmark">
   <?php echo get_the_title($id); ?>
   </a>
      </h3>

      </div>

    <div class="text-center">
    <?php
    // BUTTON
        clipmydeals_button($id, 'grid', $store_slug, $store_custom_fields);
    ?>
    </div>


       <div class="card-text mt-4"><?php the_content(); ?></div>

      <div class="small mt-0 mb-1">
    <?php
    $sep = '';
    if(!is_tax('stores')) { echo get_the_term_list( $id, 'stores','',', ',''); $sep = ','; } // stores
          ?>
       </div> 


       <?php
    if(get_theme_mod('location_taxonomy',false) and get_theme_mod('show_coupon_locations','all') != 'no') 
      {$location_html = array();
    $terms = get_the_terms( $id, 'locations'); // locations
    if($terms and !is_wp_error($terms)) {
    foreach($terms as $term) {
                            if(get_theme_mod('location_taxonomy',false) and get_theme_mod('show_coupon_locations','all')=='all' or $term->parent == 0) {
                                $location_html[] = ' <a href="'.get_term_link($term).'">'.$term->name.'</a>';
    }
    }
    }
    if(!empty($location_html)) {
         ?>

     <div class="small mt-0 mb-1">
<i class="fa fa-map-marker"></i><?php echo implode(', ',$location_html); ?>
    </div>

             <?php
        }
        }
        ?>


        <?php
        if(!empty(get_post_meta($id, 'cmd_verified_on', true))
                    or
            (comments_open($id) and 
                     get_theme_mod('coupon_page','yes')=='yes')
            ) {
        ?>
        <div>




            <?php if(comments_open($id) and get_theme_mod('coupon_page','yes')=='yes') { ?><div class="float-right">
<a class="card-link" href="<?php echo esc_url(get_permalink()).'#comments'; ?>">
   <i class="fa fa-comment"></i>         <?php $comment_count = wp_count_comments($id); echo $comment_count->approved; ?>
        </a>

          </div>
             <?php } ?>

           <?php echo do_shortcode( '[addtoany]' ); ?>

        </div>
        <?php } ?>

        </div> <!--End card-body-->

    </article><!-- #post-## -->
    <?php
}

I expect each box must readjust itself automatically depends upon the size of previous box or the other way around. They must look like symmetric.

My actual result

Answer 1

You can set a min-height of the item card to keep the sizing the same for each box.

In this example i've used flex-box to create the horizontal line of cards. Flex-box is great for adding article cards and post lists in a gridded outcome.

Run the code snippet to view the outcome...

* { 
box-sizing: border-box; 
}

body {
  max-width: 980px;
  margin: 1em auto;
  font-size: 20px;
  line-height: 1.5;
}

.card {
  text-align: center;
  background-color: #333333;
  color: #fff;
  padding: 1em;
  border-radius: 3px;
  min-height: 400px;
  margin: 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 .5em;
}

.column {
  flex: 1;
}

/* Column Spans */
.column--2of5 { flex: 0 0 40%; }
.column--1of2 { flex: 0 0 50%; }
.column--3of5 { flex: 0 0 60%; }
.column--2of3 { flex: 0 0 66.6666%; }
.column--3of4 { flex: 0 0 75%; }
.column--4of5 { flex: 0 0 80%; }

<div class="row">
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
</div>

</div>