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

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Работы по сайту для оптимизации
16 апр. 2024, в 08:46
500 руб./за проект
Разработка бота в Telegram (POIZON)
16 апр. 2024, в 06:30
30000 руб./за проект
Исправить ошибку в пагинации 1с-битрикс
16 апр. 2024, в 05:27
500 руб./за проект
Ещё заказы