我正在尝试清除一个旧应用程序的视图,该应用程序列出了使用特定总线的前客户的名称。这是它的样子:
<div id="foo_list" style="display: none;">
<div id="page_title"><h2>FOO</h2></div>
<p class="ps20">Happy Foos who used our buses:</p>
<div class="ps20">
<div class="grid_3 ps20">
<ul class="square_list">
<li>FOO1</li>
<li>FOO2 ETC... up to 10</li>
</ul>
</div>
<div class="grid_3">
<ul class="square_list">
<li>FOO1</li>
<li>FOO2 ETC... up to 10</li>
</ul>
</div>
<div class="float_l">
<ul class="square_list">
<li>FOO1</li>
<li>FOO2 ETC... up to 10</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
我已经提取了所有 FOO 信息并将其放入我们的数据库中,并且我正在使用 each 块来调用 FOO,但我不知道如何做到这一点并保持三列的相同格式。现在我只有一长列。无论如何要写一些CSS,如果FOO的数量超过10,它会将每个块平均分成2列(例如:11个FOO分成2列6和5),如果超过20分成3相等-尽可能的列?或者这是一个 Ruby 解决方案?或两者?
这就是我将其简化为我目前正在使用的内容:
<div id="foo_list" style="display: none;">
<div id="page_title"><h2>FOO</h2></div>
<p class="ps20">Happy Foos who used our buses:</p>
<div class="ps20">
<ul class="square_list">
<% @bus.foos.each do | foo | %>
<li><%= foo.name %></li>
<% end %>
</ul>
</div>
</div>