Как правильно построить html разметку нумерованного списка в две колонки?

Здравствуйте.
Вот скриншот того, что нужно сделать - https://imageup.ru/img124/4063901/scrinone.png.html
К сути -
Новая характеристика добавляется на страницу, исходя из того что введено в input, по клику.
Мне нужно чтобы получающийся список делился на две колонки - чтобы пятый элемент списка оказался под вторым, шестой под ним, семь и восемь под 4ым пунктом. И так далее. Нужно чтобы список делился на две колонки.
Как мне построить верстку, какие рычажки крутить в JS? Важно чтобы список был нумерованным.
  • Вопрос задан
  • 367 просмотров
Пригласить эксперта
Ответы на вопрос 3
RAX7
@RAX7
Ответ написан
Комментировать
402d
@402d
начинал с бейсика на УКНЦ в 1988
<!DOCTYPE html>
<html>
<style>
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
 
}

li {
  background: gray;
  width: 5em;
  height: 5em;
  margin: .5em;
}
</style>
<body>
<ul style="height: 30em;">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>
</body>

</html>

Добавляешь в список новый элемент.
Меняешь высоту из расчета
округленное_вверх ( кол-во элементов / 2) * высоту блока
Ответ написан
Да, парни, че-то вы перемудрили. Все гораздо проще:
ul {
 column-count: 2; 
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Market-place Ростов-на-Дону
от 100 000 до 200 000 ₽
24 июн. 2024, в 13:09
50000 руб./за проект
24 июн. 2024, в 11:33
50000 руб./за проект
24 июн. 2024, в 11:27
5000 руб./за проект