somik

Не могу сверстать галерею адаптивно

Рекомендуемые сообщения

Мб кто-то ради личного опыта сверстает мне галерею как на картинке: https://cloud.mail.ru/public/1idM/BUuGZ8T72

Картинки порезаные: https://cloud.mail.ru/public/MhYY/7pnLJiLUC

Требуется на флексах и адаптивно.

Я так и не смог это сделать.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Так гриды вроде не полностью сейчас поддерживаются??

Поэтому пока на флексах рекомендуют шпарить.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Флексы, к сожалению, не умеют объединять элементы из разных строк:(. Так что тут или делать на гридах с фолбэком, например, на флоаты (возможно, даже пожертвовав симметрией и центральным положением высокой картинки в старых браузерах), или сразу сдаться и подключить скрипт типа Masonry/Isotope. Можно, конечно, выкрутиться, нагородив кучу вложенных контейнеров, но поддерживать такое, если потребуется поменять порядок отображения картинок, будет ох как невесело.

Кстати, в чем здесь должна состоять адаптивность? Картинки должны перестраиваться в меньшее кол-во колонок при сужении окна?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

В принципе можно и на флексах извратиться, только придется три вложенных флекс контейнера делать.

А вообще надо дизайнерам руки отрывать за такое :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Дизайнеры не виноваты. Но да, на флексах придется именно извращаться, и результат получится очень негибким. О такой адаптивности «из коробки», как в примере mrnobody выше, придется забыть:(

Как вариант, можно попробовать скриптом проверить, применилось ли к контейнеру какое-либо из гридовых свойств (через window.getComputedStyle), и если да, то ничего не делать (всё сделают гридовые стили), а если нет — динамически добавить на страницу скрипт Masonry...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Odinokiy_volk
      Сайт https://knyaz85.github.io/
      Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов
      Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.
      Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..
      Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)
    • Автор: Mixfixpix
      Всем привет, форумчане!
      Есть задача сделать вот такую штуку как на картинке, она должна быть 100% шириной по отношению к контенту, но ограниченной высотой, к примеру 60 пикселей.
      У меня уже есть решение которое я сделал https://jsfiddle.net/x5Lavn55/, но может имеется более элегантное и лучше чем мое?
      Пробовал с svg, но не могу растянуть на 100% не изменив высоту...
    • Автор: мурамаса
      <div class="center-menu"> <div class="center-bar-one"> <h1> Новости </h1> <p>Сегодня 21 января было совершено нападение на одного из наших брокеров, прямо у дверей московской фондовой биржи. Нападающий выскочивший из за угла был одет в черный костюм с красным галстуком и в маске напала на олега олежина после чего скрылся и его след простыл. Олежин был немедленно госпитолизирован, мвд по московской области ведет расследование.</p> </div> </div> Вот хтмл код этого элемента
      .center-bar-one { float: left; width: 150px; height: 200px; font-size: 11px; color: blue; } Когда я прописываю размер шрифта и в коде присутствует тег <p>, то размер шрифта не меняется. Если прописать например цвет, то никаких проблем нет. Когда убираю тег <p> то шрифт меняется. В чем дело? помогите