使用CSS和/或JavaScript/jQuery按行和列排列列表<span> s

Question

输入：包含在父跨度中的未知数量的跨度元素的列表。例如

<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 

谢谢！

Answer 1

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

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

然后你就可以以适当的顺序它们reappending父元素和动态变化的明确的风格来分隔行重新安排你的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给垂直解决方案的最简单的方法.....