css - 我的蓝图 CSS 不适用于奇数列

Question

我在 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>

Answer 1

嗯，一个快速修复可能只是做这样的事情

<% @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">&nbsp;</li>
    <% end %>
  <% end %>
</ul>

至少我认为这是正确的代码:-) 我还在学习自己。但基本上我提供的黑客只会填写“空” li 标签来平衡它。因此，如果您有 9 个产品，它将产生 3 个额外的空 li。

可能有一种更“红宝石方式”的做法。