如何使用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 />'; 
    } 
    }