我有以下自定义查询，它输出容器中的一组项目。

<div class="container-hotel">
  <?php // The Loop
  if ( $venue_query->have_posts() ) {   while ( $venue_query->have_posts() ) { $venue_query->the_post(); ?>

  <?php $venuecounter = 1; ?>

    <div class="item-hotel">
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( \'hotel-single\' ); ?><br />
        <?php the_title(\'<h4 style="text-align:center;">\', \'</h4>\', true); ?>
        </a>
    </div>

    <?php if ($venuecounter % 3 == 0) { ?>
        <div class="clearfix"></div>
    <?php }

$venuecounter++ ;
}
} else { ?>

  something else

<?php } ?>

</div> <!-- /container-hotel -->

下面的SCS确保它们在漂亮的列中有3个交叉。

.container-hotel {
  width:78%;
  margin: 0 auto;
  @media (max-width: 480px) {
      width: 100%;
  }
}
.item-hotel {
  float: left;
  width:230px;
  margin-left: 40px;
  @media (max-width: 480px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
  }
}

然而，当最后一行中的项目少于3个时，我真的希望看到不同的行为。我希望这些是集中的，所以

[item] [item] [item] [item]

我们会看到的

[item] [item] [item] [item]

如果还有两件物品，

[item] [item] [item] [item] [item]

感谢您的帮助。

.container-hotel {
  width:78%;
  margin: 0 auto;
  text-align:center;
  @media (max-width: 480px) {
      width: 100%;
  }
}
.item-hotel {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  width:230px;
  margin-left: 40px;
  @media (max-width: 480px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
  }
}