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