GailWynand
@GailWynand
Интересуюсь ИТ, биржевой торговлей, стартапами

Как сделать такую галлерею?

Есть блок с 7 картинками. Расположить нужно следующим образом:

b383089cb93645caac8721d1452e1799.jpg

Пробовал простыми флоатами, пробовал флексбоксом. Не выходит, все портит длинная картинка.

Что тут лучше использовать? Заранее благодарен.
  • Вопрос задан
  • 433 просмотра
Пригласить эксперта
Ответы на вопрос 4
@Cyber_bober
Создайте 4 больших контейнера, размером с большое изображение, и размещайте в трех по два изображения, в одном большое.
Ответ написан
Комментировать
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал.
Решение на flex
Из минусов: высокая картинка должна стоять НЕчетной.
На статику пойдет на динамику врятли.
Ответ написан
Комментировать
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Не очень понял, почему у вас возникла проблема, примерно вот:
https://jsfiddle.net/wvj0tet4/

по поводу динамики, такие вещи делаются на стороне сервера, если работаете с файловой системой или бд, уже там при построении вашего представления, вы определяете шаблоны, в вашем случае их 2, одна фотка - значит прямоугольник, деве фотки - значит квадрат, а по поводу кол-ва столбцов, тоже можно загорячиться, ну мне почему то кажется, что определить к примеру, 4-5 колонок более чем достаточно, а вот их внутр. поведение, сколько фото и каких, уже делается просто.

Чтобы колонки тянулись от кол-ва, есть замечательные св-во:
:nth-last-child
Поддержка конечно не везде, ну уже зависит от потребностей, как мне кажется, сейчас уже, 90 % и более, решается стилями, потому, что поддержка того же Flexbox, который всем облегчил жизнь, кто умеет его готовить, показывает хорошие цифры: caniuse.com/#search=flexbox

P.S. Поправьте, если ошибся где
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы