Question

输入：父级范围内包含的未知数量的span元素的列表。 e.g。

<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>（为了将子跨度划分为组） - 我想导致子跨度 - 在N行和M列中呈现垂直和水平。 N和M应该经常更改，所以我不能使用将html元素添加到父级中的解决方案，以便将子跨度划分为组。

例如，如果我有12个子跨度且N（行）= 4且M（列）= 3，那么在浏览器中我应该看到：

横向顺序：

垂直顺序：

谢谢！

Answer 1

首先，将内跨的浮动样式设置为静态样式块中的“左”。你还必须给它们一个恒定的宽度，让它们适合列。

<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);
            }
        }
    }
}

请注意，这两个函数仅在索引计算方面有所不同。

Answer 2

列在纯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>

Answer 3

这个是水平

最简单的解决方案

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

还有一个解决方案，而不是一个ft1给出的垂直.....

使用CSS和/或JavaScript / jQuery </span>排列行和列中的<span>列表

3 个答案: