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

Есть родительский div в котором выводятся изображения с одиннаковой шириной, но разной высотой.

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

Разметка следующая:

 

Подскажите, как сделать так, чтобы изображения заполняли все свободное пространство родителя?

Дополнительно:

Ждал пока прогрузятся дивы...

  • Если высота родителя фиксированная, то флексы в колонку могут помочь.ну а вообще, в более общем случае, скриптовое решение. считаем, решаем, заполняем. на css я решения не вижу (кроме вырожденных случаев).
  • Сергей delphinpro автор клал на всё, как всегда.
  • Александр Васильев, 😀

 

разбейте на блоки left right и выводите
или используйте срипты подобные этому

Ответы:

grid, 2 колонки, чайлды внутри колонок стилями. Список по колонкам делить через js. Количество гридов из списка делить через js, исходя из дизайнерского набора по кол-ву. Изображения внутри через 100/100% и cover.

  • Это не надежно, в Сафари могут быть проблемы (это я про height:100%).
  • Сергей delphinpro, а, ну да, и проверить на реальном ios, он сейчас вроде ничего так, почти все тащит.

Можно сделать 2 разных дива и флекс колумн поставить ))))))))

https://www.cssscript.com/masonry-gallery-layout/ ну или какой-то аналогичный скрипт галереи.

 

+ Заказать

 

 

 

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Как сделать такую разметку?Есть ответ
    • 08.04.2024
    Ответить

    Для создания развернутого ответа с подсветкой синтаксиса кода на сайте stackoverflow.com, вы можете использовать тег

    В данном примере мы объявляем переменную $variable со значением "Hello, World!" и выводим это значение на экран с помощью функции echo. При использовании тега 

     весь код будет отображаться с подсветкой синтаксиса PHP, что делает его более читаемым и понятным.

Таким образом, для того чтобы создать развернутый ответ на stackoverflow.com с подсветкой синтаксиса кода на языке программирования PHP, используйте тег 
     и поместите внутрь него свой код. Это поможет другим пользователям быстрее понять ваш ответ и решить свою проблему.

Оставить комментарий