Поддержка Проблемы и решения Вывод записей в две колонки

  • Делаю вывод записей в две колонки
    Возникла проблема: записи съехали вниз. Родительский блок пропал, как будто в нем ничего нет.

    Это происходит, скорее всего, из-за свойства float (см. css код ниже), но если его убрать, записи будут в одной колонке
    Высота в пикселях каждой записи разная

    Выглядит это так
    фото

    На скриншоте записи должны были находиться в верхней белой секции в div class articles

    Так я вывожу записи на главной странице

    <div class="articles">
    
            <?php
            // проверяем есть ли посты в глобальном запросе - переменная $wp_query
            if( have_posts() ){
            // перебираем все имеющиеся посты и выводим их
            while( have_posts() ){
            the_post();
            ?>
    
            <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <?php the_content(); ?>
            </div>
    
            <?php
            }
            ?>
    
            <div class="navigation">
                <div class="next-posts"><?php next_posts_link(); ?></div>
                <div class="prev-posts"><?php previous_posts_link(); ?></div>
            </div>
    
            <?php
            }
            // постов нет
            else {
    	        echo "<h2>Записей нет.</h2>";
            }
            ?>
    
            </div>

    Этот код я вставил в functions.php

    add_filter('post_class','category_three_column_classes');
    
    function category_three_column_classes( $classes ) {
        global $wp_query;
        $classes[] = 'three-column-post';
        if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left';
        return $classes;
    }

    И прописал такие стили

    .three-column-post {
    	border: 1px solid #f4f4f4;
    	width: 47%; float: left;
    	margin-left: 4.9%;
    }
    
    .column-post-left {
    	clear: left;
    	margin-left: 0;
    }

    Скорее всего

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Возможно, не снято обтекание (clear: both).

    Если написать clear: both, то статьи встанут в одну колонку

    Я придумал другой способ, выводить статьи два раза: в первую колонку все четные, во вторую нечётные.
    Но для этого нужно выводить их через одну. Это возможно?

    Если написать clear: both, то статьи встанут в одну колонку

    Попробовал добавить к вашим стилям

    
    .articles{
     border: 3px solid navy;
     padding: 12px;
     max-width: 860px;
     margin: 0 auto;
    }
    
    .articles::after{
     content: '';
     display: block;
     clear: both;
    }
    
    

    Записи выводятся в две колонки. Скриншот.

    Изначально я хотел получить результат как на фото слева. Но ничего не вышло. Получается как справа. Смирился с этим и решил просто сделать все статьи одной высоты. Теперь появилась другая проблема: необходимо ограничивать по количеству строк описание статьи (или по количеству символов). Я нашел только как это сделать по количеству слов. Слова могут быть слишком длинные. Текста в статьях получатся разной высоты, и сами статьи будут иметь разную height. Получится некрасиво, как на фото слева. Я пытаюсь избежать этого.

    Записи выводятся в две колонки

    Так работает. Но если текст в записях будет разной длинны, то получится то, о чем я говорил

    Фото

    Изначально я хотел получить результат как на фото слева.

    Ключевое слово: Masonry.

Просмотр 5 ответов — с 1 по 5 (всего 5)