Позиции DIVs в галерее изображений

Question

Я создаю отзывчивый скелет галереи, который будет вставлен в wordpress. Галерея состоит из images разных размеров. Дело в том, что я не могу понять, как придерживаться div, которые находятся на «втором ряду», прямо под div «первой строки».

Вот codepen моей фактической работы:

http://codepen.io/anon/pen/JdXPde

И я хочу, чтобы моя галерея выглядеть следующим образом: http://webplantmedia.com/starter-themes/wordpresscanvas/features/gallery/gallery-columns/#gallery-6

Answer 1

Ahh, она загружается в конце концов. Я не думаю, что вы можете добиться того, что вам нужно, с встроенным, встроенным блоком или плавающей точкой. Я думаю, вам нужно будет использовать абсолютное позиционирование в соответствии с тем, что они используют на ссылке, которую вы переслали. Я могу порекомендовать использовать изотоп https://github.com/metafizzy/isotope, который делает все, что для вас. Это отличный инструмент.

В зависимости от вашей матрицы поддержки браузера вы можете использовать столбцы CSS, если вы не хотите использовать JS.

.wrapper { 
    column-width: 500px; 
    /* plus browser prefixes */ 
    -moz-column-width: 500px; 
    -webkit-column-width: 500px; 
} 

Прикрепите div вокруг ваших элементов с помощью класса обертки.