My Blueprint CSSが列数が不均一に機能しない

Question

私はBlueprint CSSをRailsアプリケーションで使用しています。私はこれを各項目の周りにボックスがある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> 

ような何かをちょうどをしますか可能性がありますMMM。しかし、基本的に私が提供したハックは、すべてのバランスを取るために "空の" liタグを埋めるだけです。だから、もしあなたが9つのプロダクションを持っていれば、それは3つの余分な空のリースを作ります

おそらくそれを実行する "ルビーの方法"があります。