Вертикальное расстояние между дисплеями: встроенные делители в жидкостной сетке

Question

Хорошо, не очень уверен, с чего начать ...

Я собираю себя вместе с блоггером, полностью потрошу его css и просто использую его как простой контент-менеджер. вот тестовый сайт, с которым я работал http://jamesparishtestblog.blogspot.com/

Проигнорируйте заголовок, он сломан, но я знаю, что я там делаю. Моя проблема с обзорами фильмов (украденными из яблочных трейлеров в качестве временного содержания). При изменении размера страницы они плавно переходят в ряды различной длины. Большой! Проблема в том, что второй ряд (и, следовательно, третий, четвертый и т. Д.) Выравнивается вертикально к нижней части самого длинного (самого нижнего) элемента в указанном выше ряду. Тем не менее, я хочу, чтобы каждый div аккуратно помещался ниже указанного выше, с разницей в 15px, и плавно перетекал, если расширялся другой div (нажав «читать дальше»).

Размещение элементов div в столбце исключено, поскольку я хочу, чтобы в верхнем ряду содержались самые последние сообщения рядом (в столбце они были бы ниже друг друга на левой стороне).

Также не допускается установка высот для элементов div, потому что статьи должны расширяться, а для полного желаемого дизайна преднамеренно не соответствовать друг другу.

Это беспокоило меня часами. Надеюсь, я четко объяснил себе, что кто-то может помочь.

Спасибо за ваше время.

Answer 1

Так ты хочешь этого?

--------------------------
|   __________  _______  |
|   |        |  |     |  |
|   |        |  |     |  |
|   |        |  |     |  |
|   ----------  |     |  |
|   __________  |     |  |
|   |        |  |_____|  |
|   |        |  _______  |
|   |        |  |     |  |
|   ----------  |     |  |
|               -------  |
|________________________|

Без использования столбцов вы не можете сделать это, полагаясь только на CSS. Вам нужно было бы использовать некоторые javascript или серверные вещи, чтобы поместить вещи в нужное место. По сути, вы хотите коллаж, очень жаль, что нет «display: collage»!

Конечно, я могу совершенно неправильно тебя понять.

Edit:

"Есть ли какие-либо предложения на фронте JavaScript?"

Я использую mootools почти для всех своих сайтов. Сначала я определю немного:

dispose: вынимает элемент из dom и сохраняет его в переменной.

Внедрить: засовывает элемент в дом.

Я бы загружал их в столбцы, затем располагал все столбцы в «недавнем» столбце и вставлял их обратно в верх остальных столбцов, по одному для каждого столбца. Другими словами, весь макет сделан с помощью CSS, единственное, что происходит в JavaScript, это помещает ваши «последние» вещи в верхнюю «строку».