Сижу ломаю голову, как их так сделать, пробовал и flex, можно конечно сделать через position relative, но как-то слегка извращенно. Есть способ попроще?
Т.е, мне даны такие фотографии, их нужно расставить так, как на картинке
-
Ну вот мне даны эти фотографии и мне нужно их построить также, как и на фото– Артём Блохин6 мая 2020 в 23:16
-
1column-count: ..– Monkey Mutant6 мая 2020 в 23:32
Добавить комментарий
|
1 ответ
const generateImgBlock = () => `<div class="img-container">
<img src="https://picsum.photos/${Math.ceil(Math.random()*100+200)}/${Math.ceil(Math.random()*300+150)}"/>
</div>`
document.querySelector(".gallery").innerHTML = Array(30).fill('').reduce((sum) => sum + generateImgBlock(), "");
:root {
--cols-count: 4;
}
body {
background-color: #022;
}
.gallery {
width: 600px;
margin: 15px auto;
column-count: var(--cols-count);
column-gap: 17px;
column-width: calc(100% / var(--cols-count));
}
.img-container img {
width: 100%;
display: block;
margin-bottom: 17px;
}
<div class="gallery"></div>
-
А без random как сделать можно? Просто в js, как-то еще плаваю( Просто мне нужно, чтобы именно свои иконки, и в количестве 12 шт 7 мая 2020 в 17:33
-
Просто удалите весь js, который тут приведен, и поместите свои картинки в блок
<div class="gallery"></div>
7 мая 2020 в 17:39