-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(rows)=4 和 M(columns)=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);
            }
        }
    }
}

请注意，这两个函数仅在指数计算上有所不同。

于 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 回答