Задать вопрос
@R1msk1y
javascript

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

Здравствуйте.
Вот скриншот того, что нужно сделать - https://imageup.ru/img124/4063901/scrinone.png.html
К сути -
Новая характеристика добавляется на страницу, исходя из того что введено в input, по клику.
Мне нужно чтобы получающийся список делился на две колонки - чтобы пятый элемент списка оказался под вторым, шестой под ним, семь и восемь под 4ым пунктом. И так далее. Нужно чтобы список делился на две колонки.
Как мне построить верстку, какие рычажки крутить в JS? Важно чтобы список был нумерованным.
  • Вопрос задан
  • 369 просмотров
5 комментариев
Подписаться 3 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 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) * высоту блока
Ответ написан
1 комментарий
1 комментарий
SkazochNick
@SkazochNick
Да, парни, че-то вы перемудрили. Все гораздо проще:
ul {
 column-count: 2; 
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка модуля нейросети для видеоигры
17 нояб. 2024, в 16:57
10000 руб./за проект
Разработать искусственный интеллект на Python для Telegram бота
17 нояб. 2024, в 16:01
800 руб./за проект
Сделать дизайн простого лединга
17 нояб. 2024, в 15:34
5000 руб./за проект
Ещё заказы