Я пытаюсь разбить категорию 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;
}
Попробуйте добавить следующее в .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>
Других решений пока нет …