我在 Rails 应用程序上使用 Blueprint CSS。我将其设为 4 列布局,每个元素周围都有一个框。如果我有 4 件商品或 8 件商品,那么一切都很好,我有 2 行产品。如果我有第 9 个产品或任何不能被 4 整除的产品,那么行和元素就会脱节并溢出到下一列。有谁知道问题出在哪里?
div.four-column {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width: 10em;
-webkit-column-width: 10em;
column-width: 10em;
width: 910px;
}
<ul>
<% @products.each do |product| %>
<li class="box">
<%= link_to product.name, product_path(:id) %></br>
<%= product.price %>
</li>
<% end %>
</ul>
最佳答案
嗯,一个快速的解决办法可能就是做这样的事情
<% @count_diff = @products.divmod(4) >
<ul>
<% @products.each do |product| %>
<li class="box">
<%= link_to product.name, product_path(:id) %></br>
<%= product.price %>
</li>
<% end %>
<% if @count_diff[1] > 0 %>
<% @count_diff[1].each do |empties| %>
<li class="box"> </li>
<% end %>
<% end %>
</ul>
至少我认为这是正确的代码 :-) 我仍在学习自己。但基本上我提供的 hack 只会填充“空”li 标签来平衡它。因此,如果您有 9 个作品,它会多出 3 个空的 li。
可能有一种更“ruby 方式”的做法。
关于css - 我的蓝图 CSS 不适用于列数不均匀的情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7814034/