Question

我有一个类别列表，我想在按名称排序的3列中显示。我正在使用ul和li与css

li {
  float: left;
  width: 33%;
}

所以我可以遍历每个类别。这个工作正常，除了一个问题，订购。我希望列表按字母顺序排列，但按列排序。为了演示，如果我有7个类别，A到G，它目前看起来像

A  |  B  |  C
D  |  E  |  F
G  |

我希望它看起来像

A  |  D  |  G  
B  |  E  |
C  |  F  |

有没有办法实现这个目标？

Answer 1

有两种方法可以解决这个问题。两者都涉及将您的列表分为3组，这可以使用in_groups_of来实现，但您需要传递应该属于该组的元素数量

@categories = ('A'..'G').to_a

total_per_column = (@categories.size / 3.0).ceil
@categories = @categories.in_groups_of(3, false)

你需要传递false所以它不会试图填补缺少的元素，即最后一组只包含'G'

接下来是两个选项：

使用左侧浮动的3 ul

<% @categories.each do |categories| %>
  <ul>
   <% categories.each do |category| %>
     <li><%= category %></li>
   <% end %>
  </ul>
<% end %>

或使用某种逻辑，如下所示

<ul>
  <% total_per_column.times do |index| %>
    <% @categories.each do |categories| %>
      <% if category = categories[index] %>
        <li><%= category %></li>
      <% end %>
    <% end %>
  <% end %>
</ul>

我个人更喜欢第一个，因为它更简单。：）

Answer 2

xs = %w(a b c d e f g)
xs.in_groups(3).transpose
#=> [["a", "d", "g"], ["b", "e", nil], ["c", "f", nil]]

现在行元素放置得很好，绘制表格。

Answer 3

@array = [A..Z]  
$i = 0
$j = 0 
    while $i < $array.count  do
     <ul>
       while $j < 3
      <li>
        puts @array[$i]
      </li>
        $j +=1
       end
       $i +=1
     </ul>
    end

使用嵌套while循环的概念。

三列有序列表

3 个答案: