Мой Blueprint CSS не работает с неравным количеством столбцов - PullRequest
Новая
       10

Мой Blueprint CSS не работает с неравным количеством столбцов

0 голосов
/ 19 октября 2011

Я использую 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>

1 Ответ

0 голосов
/ 19 октября 2011

ммм, быстрое решение может быть просто сделать что-то вроде этого 

<% @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 пустых ли.

Возможно, существует более "рубиновый" способ сделать это.

...