Как разделить динамически сгенерированные кнопки в столбцы с помощью Javascript?

Question

У меня есть код Javascript, который генерирует кнопки двух типов. Кнопка заголовка, а затем небольшое количество кнопок содержимого внизу. Я использовал CSS3 для разделения кнопок на столбцы с «-webkit-column-break», но это не работает должным образом в Internet Explorer или Safari.

У меня есть подход к пользовательскому Javascript. Мне просто интересно, возможно ли это, и как я могу это сделать. Вот мой псевдокод;

create 3 divs - 1, 2, and 3 

count header array. 
divide count by 3 to find number to place in each column. 

create a counter. 
for each header placed increase count by 1. 
if count is equal to column maximum then use div 2. 
if div2 count is equal to column maximum then use div 3. 

Я вижу, что одна проблема с этим подходом является то, что оно не счет для различного числа столбцов под заголовками. Я бы хотел, чтобы столбец 1 и 2 были равны по длине или все 3 были равными, если это было возможно.

Answer 1

Исправлено. Вот как я это сделал

JS Fiddle here

var mycars = new Array(); 
mycars[0] = "Saab"; 
mycars[1] = "Volvo"; 
mycars[2] = "BMW"; 
mycars[3] = "Porsche"; 
mycars[4] = "Daewoo"; 
mycars[5] = "MG"; 

var arrayCount = mycars.length; 

var columnLength = arrayCount/3; 

for (var i=0; i < mycars.length; i++) 
{ 

if (i<columnLength) 
{ 
     document.getElementById('carList').innerHTML += '<button class="countryButtons"> '+  mycars[i]+' </button><br />'; 
} 
else if(i< columnLength*2) 
{ 
document.getElementById('carList2').innerHTML += '<button class="countryButtons"> '+ mycars[i]+' </button><br />'; 
} 
    else if(i< columnLength*3) 
{ 
document.getElementById('carList3').innerHTML += '<button class="countryButtons"> '+  mycars[i]+' </button><br />'; 
    } 
    }