ワードプレス1つのカテゴリを2つのカラムに分割

Question

私は3つの投稿のみを表示する2つの列にワードプレスカテゴリを分割しようとしています。現在のコーディングを添付しましたが、最終的なブログのタイトルが2番目の列に移動し、それがどこにあるべき場所を保持していないか、誰でも私を助けることができますか？または、これにアプローチするより良い方法があるかどうか。

大変感謝しています。

 <div class="featuredPosts"> 

<?php $catquery = new WP_Query('cat=3&posts_per_page=5'); ?> 


<?php while($catquery->have_posts()) : $catquery->the_post(); ?> 


    <div class="postFeatured"> 

<img src="<?php echo get_the_post_thumbnail_url($post_id, 'full'); ?>" class="featuredImage"> 
     <h2><?php the_title(); ?></h2> 
     <a href="<?php the_permalink() ?>" rel="bookmark">Read More...</a> 
     </div> 


<?php endwhile; 
    wp_reset_postdata(); 
?> 

        </div> 

とCSS

.featuredPosts { 
     -moz-column-count: 2; 
     -moz-column-gap: 4em; 
     -moz-column-rule: none; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 4em; 
     -webkit-column-rule: none; 
    column-count: 2; 
    column-gap: 4em; 
    column-rule: none; 
} 



.postFeatured { 
margin: 0 0 5em 0; 
} 

.featuredImage { 
    border-radius: 8px; 
    box-shadow: 0px 0px 20px 0 rgba(000, 000, 000, 0.2); 
display: block; 
} 



.postFeatured h2 { 
font-size: 25px; 
color: #2B2928; 
letter-spacing: 0; 
line-height: 40px; 
padding: 1em 0; 
margin: 0px; 
} 

Answer 1

.postFeaturedに以下を追加してみてください：

-webkit-column-break-inside: avoid; 
page-break-inside: avoid; 
break-inside: avoid; 

例：

.featuredPosts { 
 
    -moz-column-count: 2; 
 
    -moz-column-gap: 4em; 
 
    -moz-column-rule: none; 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 4em; 
 
    -webkit-column-rule: none; 
 
    column-count: 2; 
 
    column-gap: 4em; 
 
    column-rule: none; 
 
} 
 

 
.postFeatured { 
 
    margin: 0 0 5em 0; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.featuredImage { 
 
    border-radius: 8px; 
 
    box-shadow: 0px 0px 20px 0 rgba(000, 000, 000, 0.2); 
 
    display: block; 
 
} 
 

 
.postFeatured h2 { 
 
    font-size: 25px; 
 
    color: #2B2928; 
 
    letter-spacing: 0; 
 
    line-height: 40px; 
 
    padding: 1em 0; 
 
    margin: 0px; 
 
}

<div class="featuredPosts"> 
 
    <div class="postFeatured"> 
 
    <img src="http://via.placeholder.com/350x150" class="featuredImage"> 
 
    <h2>Title</h2> 
 
    <a href="#">Read More...</a> 
 
    </div> 
 
    <div class="postFeatured"> 
 
    <img src="http://via.placeholder.com/350x150" class="featuredImage"> 
 
    <h2>Title</h2> 
 
    <a href="#">Read More...</a> 
 
    </div> 
 
    <div class="postFeatured"> 
 
    <img src="http://via.placeholder.com/350x150" class="featuredImage"> 
 
    <h2>Title</h2> 
 
    <a href="#">Read More...</a> 
 
    </div> 
 
</div>