html - 在网格中显示使用 PaperClip 上传的图像缩略图

Question

我正在尝试以网格类型的方式显示使用 PaperClip 上传的六张图片。

无论我尝试什么，图像都只显示在一行中。如果我将类更改为 gallery，它会改为每行显示一张图片。

我也尝试过 #each_slice 但没有成功，使用 index 是我最后一次尝试。

index.html.erb

<div class="page-header"><h1>My Work</h1></div>
  <div class="media">
    <% @documents.in_groups_of(3, false).each_with_index do |document_group, index| %>
      <% document_group.each do |document| %>
        <div class="media-left">
          <% if index < 3 %>
          <%= link_to image_tag(document.doc.url, class: 'media-object', size:"108x152"), document.doc.url, target: '_blank' %>
          <%= link_to 'Remove', document_path(document), class: 'btn btn-danger', method: :delete, data: {confirm: 'Are you sure?'} %>
        </div>
        <div class="media-body">
          <h4 class="media-heading"><%= document.title %></h4>
        </div>
        <% end %>
      <% end %>
    <% end %>  
  </div>
</div>

documents_controller.rb

class DocumentsController < ApplicationController
  def index
    @documents = Document.order('created_at')
  end
end

Answer 1

这并不是真正需要用 Ruby 解决的问题。你的拇指是固定宽度的吗？如果是这样，您可以将它们放在一个 3x{拇指宽度 + 任何边距，需要填充}的 div 中，每行只留出三个空间。

或者，您可以使用 nth child选择器也许？