1

2 種類のボタンを生成する 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 つは、ヘッダーの下にあるさまざまな列数を考慮していないことです。可能であれば、列 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 に答える