1

我有 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 列都相等。

4

1 回答 1

1

固定的。我是这样做的

JS小提琴在这里

 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 />';
   }
  }
于 2013-03-18T10:29:17.077 回答