Здравствуйте, хочу создать такой дизайн
Задать фиксированную высоту контейнера, горизонтальный скролл и функцию вставки картинки, но из-за горизонтального скрола все картинки идут в одну линию, а не друг под другом, а я хочу чтобы сначала шла колонка в три картинки (сверху вниз), а потом новая колонка с тремя картинками сверху вниз (пускай все картинки будут одинаковой ширины и высоты).
.container {
width: 80%;
margin: 20px auto;
background-color: #edf0f4;
height: 760px
}
.gallery {
width: 100%;
padding: 10px;
height: 100%;
margin: 0 auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
}
.test {
display: inline-block;
width: 30%;
height: 30%;
background-color: red;
}
.gallery::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #d1dae3;
}
.gallery::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.gallery::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #21b8c6;
}
<body>
<div class="container">
<div class="gallery">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</body>
Как разместить элементы в несколько линий при горизонтальном скролле? Можно ли использовать только HTML и СSS или придется добавить javascript? Может есть какой-то плагин для этих целей?
display:flex
,flex-direction:column
- как вариантflex-wrap:wrap