Как выводить ленту постов в зависимости от ширины экрана?

180

04 июля 2017, 20:39

Есть задача сделать ленту постов, которая будет динамически подстраиваться под ширину экрана пользователя. Сложность в том, что при достаточно больших разрешениях посты выводятся в 2 колонки, а при уменьшении разрешения - в одну.

Ленту в 2 колонки пробовал сделать поочередным добавлением float left и right в зависимости от четности элемента:

.post:nth-of-type(2n+1) {float: left; width: 50%;}
.post:nth-of-type(2n) {float: right; width: 50%;}

При уменьшении разрешения media убирает float и все идет в одну колонку.

Это решение рабочее, но у него есть существенный минус.В ленте периодически образуются разрывы из-за того, что посты имеют разную высоту и float:left может попасть вправо, а float:right может попасть влево.

Как можно нормально вывести ленту постов под эту задачу только средствами css?

Схематически то, что происходит сейчас:

Answer 1

Для родителя

display:flex;
justify-content: space-between; /*Выравнивание элементов по в соответствии с основной осью, в контейнере*/
flex-wrap: wrap; /*Что бы переносилось на новую *строку* */

Для блоков уже

marging: 10px ;/*для отсупов*/
max-width: 350px;
width: 50%;

Сам метод полностью рабочий и сам будет сбрасываться на новые строки

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Стандарты HTML и CSS

Есть какой-то официальный источник со всеми стандартами HTML5 и CSS на русском языке?

167

HTML

PHP Simple HTML DOM Parser, как найти нужную ссылку?

Как спарсить нужную ссылку, если на странице много одинаковых классов и номер всегда разный я про [0, и тп

233

HTML

Черную картинку заменять на белую при наведении

Какие есть способы замены черного изображения на белое с помощью css при :hover?

169

HTML

проблемы с элементами списка <ul>

168