php-ホームページに表示される投稿の位置を調整する方法

私のワードプレスブログのインデックスを最近公開された投稿を示す2つの列に分割した後、特定の条件で発生している醜い問題があることに気づきました。

ある投稿が占めるスペースが他の投稿と異なる場合、ウェブサイトは別の投稿が表示されるはずだったスロットの上に大きな空白スペースを保持し、最終的には後で表示されるため、ひどいグラフィックスタイルが発生します。

この問題も奇妙です。条件によっては（たとえば、ある投稿のテキストが他の投稿よりも多い場合）、次の投稿を少し下げて開始させるだけで、投稿が正しく表示されます（画像：https：//images2.imgboxを参照）。 com / 99/99 / Ji8arVCr_o.png ）

投稿画像のサイズが異なる場合は、上記の空白部分の問題が発生します（画像を参照： https ：//images2.imgbox.com/b3/e1/kBCKyvK4_o.png）

また、私が取り組んでいるテストドメインで問題に気付くことができます：https：//maiale-1025cb.ingress-erytho.easywp.com/

写真＃1のようにウェブサイトに投稿をうまく表示させるために、コードに何を追加すればよいか教えてください。

現在使用しているコードは次のとおりです。

<?php get_header(); ?>
<div class="container">
<div class="row">
<div id="main">
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">
<article class="post col-md-6">
<h3 class="entry-title widget-title text-center">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<br>
<div class="col-md-4 text-center">
<a href="<?php the_permalink() ?>"><img style="border-radius: 10px;" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="500" height="750" class="img-responsive inblock main-poster"></a>
</div>              
<div class="col-md-8 text-justify">
<table class="table table-condensed table-bordered table-hover">
<tr><th><i class="icon fa fa-cog"></i> Info 1</th><td><?php echo get_post_meta($post->ID, 'description', true); ?></td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info 2</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info 3</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info 4</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info 5</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
</table>
</div>  
</article>  
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>      
<?php endif; ?>Copy code