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>