Как верстается такая галерея?

Question

[Алим Алибаев]

Здравствуйте, я новичок в вёрстке, сейчас практикуюсь, подскажите пожалуйста, как сверстать такую галерею? Хотелось бы на чистом css.

Answer 1

[Stone-Studio]

Не врубился в вопрос :/
Я-бы просто задал картинкам идентификаторы,

<img id="one" src="#" />
<img id="two" src="#" />
<img id="three" src="#" />

А затем через паддинги все это выравниваем (примеры кода - допиши сам).

#one {
  padding-left: 10px;
}
#two {
  padding-left: 110px;
}
#three{
  padding-left: 10px;
}

В чем здесь необычного?

Comments

[Дима nahkar]

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

[Алим Алибаев]

я новичок

[Stone-Studio]

Дима: Примеры кода - допиши сам. Да, я не знаю размеров, но я показал механизм как сверстать это на чистом CSS и HTML. Как было сказано выше - человек новичок, поэтому динамическая генерация галлерии на JS не требуется.

[Сергей Протько]

Stone-Studio: фу айдишники для стилей...

[Serj-One]

Моветон. id, там где можно использовать классы.

[Stone-Studio]

Давайте будем использовать CSS таким, каким он задумывался. Мы можем прописать классы для ВСЕХ, что-бы задать одинаковые свойства (например border), а наша цель УНИКАЛЬНО идентифицировать изображения, что-бы задать уникальные значения (например - для каждого изображения свой отступ).

Answer 2

[Дима nahkar]

Плаuин masonry masonry.desandro.com

Comments

[Алим Алибаев]

Хотелось бы конечно на чистом css, без сторонних библиотек, всё же вам спасибо.

[Сергей Протько]

Алим Алибаев: на чистом css - float: left

[Дима nahkar]

Даже на крупных фирмах используют эту библиотеку, потому что на чистом css подсчитать абсолютную позицию и размер соседних картинок нельзя, поэтому можно и самому написать свой велосипед но всеравно с использованием JS

[Алим Алибаев]

Сергей Протько: То есть, для всех изображений ставить float: left; ?

[Сергей Протько]

Алим Алибаев: все очень зависит от конкретной задачи. Скажем можно обойтись flexbox-ами но тогда придется отказаться от поддержки IE (полифилы как бы есть но всеравно все грустно).

demosthenes.info/blog/844/Easy-Masonry-Layout-With... - вот пример на флексбоксах. Чистый CSS, никакого JS но IE10+. Это самый крутой способ из тех что есть сейчас (как с точки зрения простоты реализации так и с точки зрения скорости отрисовки).

Так же еще зависит от размера изображений. Если они вам не известны - становится сложнее задача. Приходится вводить какие-то рамки для изображений, центрировать их, обрезать и т.д.

Вариантов это сделать масса.