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