wordpress一個類別分成兩列

Question

我試圖將wordpress類別分成兩列，只顯示三個帖子。已附上當前的編碼，但最終博客的標題移到第二列，並未保留它應該在的位置，任何人都可以協助或幫助指導我？或者如果有更好的方法來解決這個問題。

非常感謝！

 <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>