我的藍圖CSS不適用於列數不平的列表

我在Rails應用程序上使用Blueprint CSS。我製作了一個四列布局，每個項目周圍都有一個框。如果我有4項或8項，那麼一切都很好，我有2排產品。如果我有第9個產品或者任何不能被4整除的東西，那麼這些行和項目就會脫節並溢出到下一列。有誰知道問題是什麼？我的藍圖CSS不適用於列數不平的列表

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>

來源

2011-10-18 noob

MMM速戰速決可能做到這像做這樣

<% @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。

這樣做可能更「紅寶石式」。

來源

2011-10-18 22:44:34 witharmshigh

感謝您的代碼。不幸的是，這不起作用，因爲它不識別divmod。我得到了未定義的方法錯誤，因爲（我認爲）divmod只能與整數一起使用。解決方法是執行'@products.count.divmod（4）'。我仍在研究其餘的黑客行爲。會告訴你這件事的進展的。 – noob

目前，下一個錯誤是'undefined method'每個'for 1：Fixnum' for'@count_diff [1]。每個do | empties |' – noob

怎麼做@ products.length.divmod（4）而不是count？ – witharmshigh

我的藍圖CSS不適用於列數不平的列表

回答

相關問題