Мне нужно избавиться от пробелов между элементами в макете столбца. Я могу использовать последнюю версию css3, поскольку сайт предназначен для современных браузеров/устройств, но мне нужно избегать решения javascript, так что страница, поставляемая с сервера, не нуждается в повторной визуализации на основе ширины клиента.
Используя flexbox, столбцы css и другие трюки, мне нужно уговорить pinterest-подобный макет. (Pinterest использует javascript и абсолютное позиционирование для своего макета, он даже не отображается с выключенным js.) На сайте есть ящики с известной шириной, но с переменной высотой. Количество столбцов должно варьироваться в зависимости от ширины браузера. (Я могу сделать это с помощью медиа-запросов, если я знаю, что изменить атрибут css.) Вот что это выглядит: через
Также обратите внимание, что я не могу просто увеличить высоту контейнеров, чтобы заполнить пустое пространство. Я хочу принести элемент под ним UP, а не выполнить все высоты. (Таким образом, растягивание элементов 1, 3 и 4 на рисунке выше НЕ является тем, что я хочу.)
Вещи, которые я пробовал:
-
CSS 3 столбцы. Это выглядит великолепно, но предметы находятся в неправильном порядке, причем второй элемент находится под первым. Если это можно изменить на другой порядок, так что они идут влево-вправо, отлично!
-
Flexbox различные конфигурации flexbox, я пробовал практически все настройки, которые я смог изменить.
-
Javascript. Да, я знаю, что могу вручную создавать столбцы и повторно отображать их при изменении размера. Я стараюсь избежать дорогостоящей операции повторного рендеринга, которая требует ручной балансировки столбцов и отображения. Я могу прибегнуть к этому для старых браузеров, которые не поддерживают решение css3. Я также хочу не вручную позиционировать все элементы. Гросс.
Я добавил ссылку на комментарий к JSFiddle, потому что я не могу включить его здесь как "ссылки на jsfiddle require code".