Как разбить встроенные блоки максимум на 2 строки?

У меня есть неопределенное количество блоков, которые я хочу поместить в контейнер, и иметь для них разбить на 2 строки максимум, а затем иметь возможность прокручивать по горизонтали по этим двум строкам блоков.

Я пробую код, который вы видите во фрагменте, но он не работает. Он размещает все блоки в одну строку.

let container = document.getElementById('container')
let numOfBlocks = 20 // could be any number
let blockSize = 200
let blockRightMargin = 10
let maxContainerWidth = Math.ceil(numOfBlocks/2)*(blockSize+blockRightMargin)

while (numOfBlocks) {
  let block = document.createElement('div')
  block.className = 'block'
  container.appendChild(block)
  numOfBlocks--
}

container.style['max-width'] = maxContainerWidth + 'px'

#horizontal-scroller {
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  max-width: 420px;
  overflow-x: auto;
}

#container {
  position: relative;
  float: left;
  height: auto;
  width: auto;
  text-align: left;
  font-size: 0;
  white-space: nowrap;
}

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: lime;
}

<div id="horizontal-scroller">
  <div id="container"></div>
</div>

html css javascript

09.04.2022 21:37

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте сетку CSS:

#horizontal-scroller {
  position: relative;
  max-width: 420px;
  overflow-x: auto;
  display: grid;
  grid-template-rows: 1fr 1fr; /* 2 rows */
  grid-auto-flow: column;
  gap: 10px;
}

#horizontal-scroller > div {
  width: 150px;
  height: 150px;
  background: lime;
}

<div id="horizontal-scroller">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

09.04.2022 21:44

Другие вопросы по теме

Используя обычную кнопку (не радио/флажок), как я могу убедиться, что выбрано только одно значение И отменяет выбор другого, если оно выбрано?

В моем приложении для реагирования я импортирую мобильные стили, которые переопределяются общей таблицей стилей.

Как я могу постоянно добавлять элемент HTML в JSX? (Реагировать)

Как я могу использовать другой стиль для эмодзи?

Анимация перехода фокуса для контура не работает при расфокусировке ввода HTML

Как указать параметры при подключении к разным веб-страницам в рамках django

HTML-контент неожиданно корректирует мой CSS

Я хочу прокручивать или указывать этот алфавит при нажатии в меню

Как разбить встроенные блоки максимум на 2 строки?

Ответы 1

Другие вопросы по теме

Похожие вопросы