-2

入力：親スパン内に含まれる、不明な数のスパン要素のリスト。例えば

<span id="parent">
<span id="child-1">1</span>
<span id="child-2">2</span>
<span id="child-3">3</span>
<span id="child-4">4</span>
<span id="child-5">5</span>
<span id="child-6">6</span>
<span id="child-7">7</span>
<span id="child-8">8</span>
<span id="child-9">9</span>
<span id="child-10">10</span>
...
...
...
</span>

出力： CSSクラスおよび/またはJavaScript / jQueryを使用し<span>、親スパン内にsを追加せずに（子スパンをグループに分割するために）-子スパンを垂直方向と水平方向の両方にレンダリングさせたい- N行M列。NとMは頻繁に変更される必要があるため、子スパンをグループに分割するためにhtml要素を親スパンに追加するソリューションを使用することはできません。

たとえば、12個の子スパンがあり、N（行）= 4およびM（列）= 3の場合、ブラウザーに次のように表示されます。

水平方向の順序：

1 2 3
4 5 6
7 8 9
10 11 12

垂直方向の順序：

1 5 9
2 6 10
3 7 11
4 8 12

ありがとう！

4

3 に答える 3

2

まず、静的スタイルブロックで内部スパンのフロートスタイルを「左」に設定します。また、列に収まるように一定の幅を指定する必要があります。

<style type="text/css">
    #parent span { float: left; display: block; width: 100px; }
</style>

次に、JavaScriptでスパンを適切な順序で親要素に再追加し、クリアスタイルを動的に変更して行を分離することにより、スパンを再配置できます。これは私のサンプルコードです：

function makeHorizontalOrder(rows, cols)
{
    var parent = document.getElementById("parent");
    for (var row = 0; row < rows; ++row)
    {
        for (var col = 0; col < cols; ++col)
        {
            var index = 1 + col + row * cols;
            var span = document.getElementById("child-" + index);
            if (span)
            {
                span.style.clear = col ? "none" : "left";
                parent.appendChild(span);
            }
        }
    }
}

function makeVerticalOrder(rows, cols)
{
    var parent = document.getElementById("parent");
    for (var row = 0; row < rows; ++row)
    {
        for (var col = 0; col < cols; ++col)
        {
            var index = 1 + row + col * rows;
            var span = document.getElementById("child-" + index);
            if (span)
            {
                span.style.clear = col ? "none" : "left";
                parent.appendChild(span);
            }
        }
    }
}

2つの関数は、インデックスの計算のみが異なることに注意してください。

于 2012-04-11T01:39:25.523 に答える
1

列は純粋な CSS で行われ、順序は JavaScript で行うことができます。

各スパンに固定幅を与えてから、親スパンを固定幅に設定して、他のスパンを必要な数の「列」に保ちます。

<style type="text/css">
#parent {
  display: block;
  width: 5em;
  border: 1px solid red
}

#parent span {
  width: 1.3em;
  border: 1px solid blue;
}
</style>

<span id="parent">
  <span id="0">0</span>
  <span id="1">1</span>
  <span id="2">2</span>
  <span id="3">3</span>
  <span id="4">4</span>
  <span id="5">5</span>
  <span id="6">6</span>
  <span id="7">7</span>
  <span id="8">8</span>
  <span id="9">9</span>
  <span id="10">10</span>
  <span id="11">11</span>
</span>
于 2012-04-11T00:51:13.627 に答える
0

これは、水平方向の最も簡単なソリューションです

$('#parent').css('text-align','left').children().each(function(i){if((i+1)%3==0) $(this).after('<br>')})

まだft1が垂直に与えたものとは異なる解決策に.....

于 2012-04-11T06:06:49.893 に答える