Как с помощью js расположить динамический список в две колонки?

Каким образом с помощью js расположить динамическое кол-во городов в две колонки: половину списка в левую колонку, другую половину в правую (как на скриншоте)?

86469b07dc9a4f68a7bbe1751a15f00d.png
  • Вопрос задан
  • 2886 просмотров
Пригласить эксперта
Ответы на вопрос 4
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Два дива, обходим массив с городами, когда счетчик обхода чётный -- аппендим в один див, когда нечетный -- в другой.
Ответ написан
@mr_ko
Javascript, Node.js. React.js, Vue.js, Wordpress
Такое можно сделать и на CSS
.клас_контейнера li:nth-child(odd) {
float: left;
}

Или на jQuery както так.
$( ".клас_контейнера li:odd" ).css( "float: left" );
Ответ написан
Dark_Knight
@Dark_Knight
Game Dev
<ul id="listCitiesLeft"></ul>
    <ul id="listCitiesRight"></ul>


var cites = ["Алупка", "Алушта", "Армянск", "Бахчисарай", "Белогорск", "Джанкой", "Евпатория", "Керчь",
             "Красноперекопск", "Саки", "Севастополь", "Симферополь", "Старый Крым", "Судак",
              "Феодосия", "Щёлкино", "Ялта"];

function createList(cites) {
    var listLeft = document.getElementById('listCitiesLeft'),
        listRight = document.getElementById('listCitiesRight'),
        li = null,
        getSide = null;

    var citesCount = cites.length,
        leftColumn = Math.floor(citesCount / 2);

    function createCity(city, getSide) {
        li = document.createElement('li');
        li.innerHTML = city;
        getSide.appendChild(li);
    }

    for (var i = 0; i < citesCount; i ++) {
        i < leftColumn ? getSide = listLeft : getSide = listRight;

        createCity(cites[i], getSide);
    }
}
createList(cites);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы