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;并从container-image div中删除justify-content: center。还可以从正文中删除默认的边距。

​

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>

​