Question

我是Ruby on Rails的新手。如何在两列中显示产品？

当我写下以下内容时，右栏将显示相同的产品，但我想显示一些在左边，一些在右边。

#main_container  
.left_col

%div{"data-hook" => "___homepage_featured_products"}

%h3

   Featured Activities
 - @featured.each do |pr|
   - @product = pr
   %a.box{:href=>url_for(@product), :title=>"#{@product.name} | #{@product.location}"}
     - if @product.images[0]
       .img{:style=>"background-image: url('#{@product.images[0].attachment.url(:original)}')"}
       .details
         %h3
           = @product.name.truncate 20
         %p.infos
           = image_tag @product.activity_type.icon, :class=>"pictogram" rescue ''
           %span= @product.activity_type.name.titleize rescue ''
           \/
           %span.price= number_to_currency @product.price rescue ''
           \/
           = @product.location
           \/
           = @product.level
         %p
           = @product.description.truncate(120) rescue ''

.right_col

Answer 1

您可以将每个产品放入自己的div中，然后使用CSS将它们浮动到左侧，这样最多可以在水平方向上彼此相邻显示2个框。这将产生2列布局的效果。举个例子：

#main_container { width: 900px; }
.featured_product { width: 450px; float: left; }

根据需要添加填充等。

或者，您可以在从数据库中检索数组后拆分数组并运行代码两次，一次在左栏中，一次在右侧：

@left, @right = @featured.in_groups_of((@featured.count / 2.0).ceil, false)

如何在Rails中的两列中显示数据

1 个答案: