Как сверстать такую фотогалерею адаптивно?

[Светлана Г.]

Здравствуйте!

Нужно сверстать такую фотогалерею адаптивно:

 

Принцип Bootstrap, на мой взгляд, не подходит. Нужен совет, какой способ выбрать.

Edited January 5, 2015 by Светлана Г.

[ShumNo]

медиа запросы + резина?

[Светлана Г.]

медиа запросы + резина?

Это само собой.

Для desktop ширина - 940px + 10px на отступы. Для меньших разрешений я уже могу не придерживаться именно такого отображения.

 

Проблема в промежутках между блоками - как их задавать, как их обнулять, когда они будут падать на другую строку.

Нужен какой-то универсальный способ.

Edited January 5, 2015 by Светлана Г.

[ShumNo]

так может все таки %?
между блоками тоже %

"обнулять" в зависимости от кол-ва элементов :nth-child(N)

[Светлана Г.]

"обнулять" в зависимости от кол-ва элементов :nth-child(N) 

 

Как определять, сколько в данный момент элементов?

[ShumNo]

медиа запросами.  говорим например, что ширина блока 50%  значит таких блоков в строчке у нас 2 и значит у второго, четвертого и т.д убираем отступ, а у 3,5 и т.д наоборот добавляем

я так понял строчек много?  или одна?  если одна то ужимаем их, а если все становится слишком мелко то прячем лишние ну или чего вы там хотите)

[Sensei]

Разрыв делаем паддингом.

Сдвигаем обертку на величину разрыва.

 

http://jsfiddle.net/6ra2j7w8/

[psywalker]

 

медиа запросы + резина?

Это само собой.

Для desktop ширина - 940px + 10px на отступы. Для меньших разрешений я уже могу не придерживаться именно такого отображения.

 

Проблема в промежутках между блоками - как их задавать, как их обнулять, когда они будут падать на другую строку.

Нужен какой-то универсальный способ.

 

Может вот эта статейка как-то поможет?

[Светлана Г.]

Разрыв делаем паддингом.

Сдвигаем обертку на величину разрыва.

 

http://jsfiddle.net/6ra2j7w8/

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

 

 

медиа запросы + резина?

Это само собой.

Для desktop ширина - 940px + 10px на отступы. Для меньших разрешений я уже могу не придерживаться именно такого отображения.

 

Проблема в промежутках между блоками - как их задавать, как их обнулять, когда они будут падать на другую строку.

Нужен какой-то универсальный способ.

 

Может вот эта статейка как-то поможет?

 

Да, я этот способ также рассматривала как один из вариантов. Пока надо попробовать что-то уже сверстать и тогда буду решать.

медиа запросами.  говорим например, что ширина блока 50%  значит таких блоков в строчке у нас 2 и значит у второго, четвертого и т.д убираем отступ, а у 3,5 и т.д наоборот добавляем

я так понял строчек много?  или одна?  если одна то ужимаем их, а если все становится слишком мелко то прячем лишние ну или чего вы там хотите)

 

Строчек будет много.

[Sensei]

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

 

Так флекс тут не главное, его можно заменить на инлайн-блоки.

Я же вам показал как сделать разрыв между колонками.

[Светлана Г.]

 

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

 

Так флекс тут не главное, его можно заменить на инлайн-блоки.

Я же вам показал как сделать разрыв между колонками.

 

Ой, простите за невнимательность! Отрицательные поля должны помочь. Только осталось решить - блоки использовать плавающие или inline-block.

[Sensei]

Высота у блоков может быть разная, «float» здесь не годится.

[Светлана Г.]

Высота у блоков может быть разная, «float» здесь не годится.

Скорее всего, высоту будем ограничивать.

[Светлана Г.]

Сделала вот так: http://jsfiddle.net/vxsya1kt/6/

Вроде все как надо?

Edited January 6, 2015 by Светлана Г.