Rails：上传图片并对齐为图库

Question

我从我开发的rails应用程序上传图像，edit form当前上传的图像仅显示在一行中：

这是我的设置：

 <div class="container-image">
       <% @attachments.each do |attachment| %>
    <div class="item-image">
      <div class="pinImage">
            <%= image_tag(attachment.image.url(:mini))%>
        <p style="font-size: 13px;">
                <%= link_to "Remove", remove_item_attachment_path(attachment),
                            data: { confirm: "Are you sure?"},
                            :method => :delete %></p>
            </div>
          </div>
       <% end %>
      </div>

这是css：

.pinImage img
  width: 100%
  height: auto
  border: 1px solid #d9d9d9
  border-radius: 6px
  background-color: white


.container-image
  max-width: 1200px
  display: flex
  align-items: center
  -webkit-justify-content: center
  /* Safari */
  justify-content: center


.item-image
  padding: 5px
  display: block

但我希望图像显示为图像库，如下所示。知道如何解决这个问题吗？

Answer 1

试试这个更新的CSS。添加了flex-wrap: wrap;并从justify-content: center div中删除了container-image。同时从正文中删除默认边距。

 
body {
  margin: 0;
}
.pinImage img {
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background-color: white;
}

.container-image{
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.item-image{
display: block;
  width: 25%;
  }

 <div class="container-image">
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
</div>