Как сделать скролл по горизонтали с двумя рядами внутри?
У меня есть контейнер, внутри которого должны быть два ряда блоков, расположенных горизонтально, а не вертикально. Мне нужно сделать так, чтобы эти два ряда остались горизонтальными, и я мог прокручивать их по горизонтали. Я добавил скролл по горизонтали, но блоки все равно уходят друг под друга(в плане не идут дальше в ряд а уходят в колонку). Мне нужно сделать так, чтобы контейнер list__block не выходил за рамки контейнера wrapper, и мог прокручиваться по горизонтали.
<div class="wrapper"> <ul class="list__block"> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> </ul> </div> |
<div class="wrapper"> <ul class="list__block"> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> </ul> </div>
.wrapper { width: 1200px; height: 608px; background-color: blue; margin: auto; display: flex; align-items: center; } .list__block { margin-left: auto; border: 1px solid red; width: 1000px; height: 580px; display: flex; flex-wrap: wrap; overflow-x: scroll; overflow-y: hidden; gap: 20px; } .item__block { width: 450px; height: 247px; background: red; } |
.wrapper { width: 1200px; height: 608px; background-color: blue; margin: auto; display: flex; align-items: center; } .list__block { margin-left: auto; border: 1px solid red; width: 1000px; height: 580px; display: flex; flex-wrap: wrap; overflow-x: scroll; overflow-y: hidden; gap: 20px; } .item__block { width: 450px; height: 247px; background: red; }
Дополнительно:
А второй ряд - это что из приведенного?
overflow-y: scroll;
Ответы:
Используете свойство overflow: scroll, есть два варианта прокрутки - горизонтальная и вертикальная. Вот как вы можете настроить каждый из них:
Горизонтальная прокрутка
Если вам нужно добавить горизонтальную прокрутку к вашему контейнеру, вы можете использовать следующее:
.scroll-container { width: 300px; /* Ширина вашего контейнера */ height: 200px; /* Высота вашего контейнера */ overflow-x: scroll; /* Добавление горизонтальной прокрутки */ } |
.scroll-container { width: 300px; /* Ширина вашего контейнера */ height: 200px; /* Высота вашего контейнера */ overflow-x: scroll; /* Добавление горизонтальной прокрутки */ }
Вертикальная прокрутка
Если вы хотите добавить вертикальную прокрутку к вашему контейнеру, используйте следующий код:
.scroll-container { width: 300px; /* Ширина вашего контейнера */ height: 200px; /* Высота вашего контейнера */ overflow-y: scroll; /* Добавление вертикальной прокрутки */ } |
.scroll-container { width: 300px; /* Ширина вашего контейнера */ height: 200px; /* Высота вашего контейнера */ overflow-y: scroll; /* Добавление вертикальной прокрутки */ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания горизонтального скролла с двумя рядами внутри можно использовать следующий подход:
1. Создайте контейнер div, который будет иметь фиксированную высоту и ширину, а также свойство overflow-x со значением scroll для создания горизонтального скролла.
2. Внутри контейнера создайте два блока div, которые будут представлять два ряда элементов.
3. Установите для каждого из этих блоков div свойство display со значением inline-block, чтобы они отображались в одну линию.
4. Для каждого из блоков div установите ширину, равную ширине контейнера, чтобы они занимали всю доступную ширину и не переносились на новую строку.
5. Заполните каждый из блоков div элементами, которые будут располагаться в два ряда.
Пример кода на языке PHP:
<div style="width: 300px;height: 100px"> <div style="width: 600px"> <div>Элемент 1</div> <div>Элемент 2</div> <div>Элемент 3</div> <div>Элемент 4</div> <div>Элемент 5</div> </div> <div style="width: 600px"> <div>Элемент 6</div> <div>Элемент 7</div> <div>Элемент 8</div> <div>Элемент 9</div> <div>Элемент 10</div> </div> </div>
Таким образом, вы создадите контейнер с горизонтальным скроллом, внутри которого будут располагаться два ряда элементов. Каждый ряд будет занимать всю доступную ширину контейнера, а скролл позволит просматривать все элементы в случае их переполнения по горизонтали.