WordPress одна категория разделена на две колонки

Я пытаюсь разбить категорию 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;
}

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

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector