项目未按顺序列出。列出的项目之间存在差距，如何解决此问题。
屏幕截图：https://prnt.sc/sphfig
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="tg-topcity">
<figure class="tg-cityimg">
<img src="<?php echo esc_url( $cat_image ); ?>" alt="<?php esc_html_e(\'City Image\', \'listingo\'); ?>">
<figcaption>
<h3><a href="<?php echo esc_url( get_term_link( $value->term_id, \'cities\' ) ); echo esc_attr( $custom_url ); ?>"><?php echo esc_attr( $value->name ); ?></a></h3>
<span><?php echo esc_attr( $total_users ); ?> <?php esc_html_e(\'Listings\', \'listingo\'); ?></span>
</figcaption>
</figure>
</div>
</div>
<?php } } ?>
</div>
CSS
.tg-topcity, .tg-popularcities {
width: 100%;
float: left;
}
最合适的回答,由SO网友:Tuts Insider 整理而成
问题听起来与CSS有关，请尝试使用以下解决方案：
.tg-topcity, .tg-popularcities {
width: 100%;
display :inline-block;
float: left;
}
或者您也可以尝试以下方法：
.tg-topcity, .tg-popularcities{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
