Как установить высоту div по содержимых div с position: absolute?

Question

[f1nef1ne]

Должен получится такой себе коллаж из изображений. Колаж получаеться, но проблема в том, что после этого десятка div'ов с position:absolute мой wrapper имеет высоту равную высоте h5 заголовка. Пробовал, возможно не верно, div c clear:both добавлять после блока, но увы. Помогите решить проблему, пожалуйста.
Должно быть как-то так.

Есть такой фрагмент кода.

<div class="user-page-collage-wrapper">
<h5 class="vsmall-title">Фотографии</h5>
<div class="user-page-collage">
<div class="user-page-collage-photo" style="margin-top: 155px; z-index: 510;"><a href="/photo/91/album/345/346_photo.jpeg"><img src="/photo/91/album/345/346_photo.jpeg"></a></div
<!-- И еще несколько таких же блоков -->
</div>
</div>

И CSS:
.user-page-collage {
position: relative;
width: 100%;
padding: 0px 50px;
}

.user-page-collage-photo {
max-width: 130px;
width: 130px;
max-height: 130px;
height: 130px;
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

Answer 1

[Alex]

Абсолютно позиционированные элементы не влияют на поток, так что заставить контейнер учитывать их размер никак не получится. Но если у вас они позиционированы абсолютно, то, выходит, вы знаете координаты и знаете, где заканчивается самое нижнее изображение. Можете задать контейнеру min-height c этим значением.

Answer 2

[Виталий Киренков]

Я бы советовал использовать плагин - masonry.desandro.com
И не запариваться с ручным позиционирование.

Comments

[f1nef1ne]

Дело в том, что фото мне нужно налаживать друг на друга и в любом случае это будет position:absolute. Не вариант подключать скрипт.

[Виталий Киренков]

@f1nef1ne С абсолютом - никак.

Изначально сделайте колонки, а потом внутрь кладите элементы.

[f1nef1ne]

@DeLaVega Каким образом можно сделать эти колонки и как выстроить тогда изображения? (Приложил изображение готового результата. Вот как раз та часть с изображения не идет в счет размера блока, лишь заголовок)

[Виталий Киренков]

@f1nef1ne ого =)) Лучше тогда жёстко прописать высоту и всё.

Answer 3

[Юрий Лобанов]

А Вы этот свой коллаж залейте одной фоткой, какие проблемы? Или они кликабельные? Тогда или используйте js (как считать высоту — это еще подумать надо), или посчитайте высоту на калькуляторе и пропишите ее для родителя. Я бы сделал последним способом.