css - 从 rails View 中的循环图片为每张图片制作新的 zurb 基础列

Question

我正在使用 zurb foundation 来引导我的应用程序。目前我在 View 中发生了类似的事情

<h3>Friends</h3>
<div class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-3 columns">
        <div class="friends">
          <% @friends.each do |friend| %>
            <tr>
            <td><%= friend.full_name %></td><br/>
            <td><%= image_tag(friend.image_url)%></td><br/>
            </tr>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

它显示多张图片。我想要做的是为每张图片创建一个“大 3 列”，而不是在一个“大 3 列”中显示所有图片。图片最终应该并排放置。

我主要关注 ruby​​ on rails 而不是前端。在我的 application.css 中，我添加了这个

.friends {
    display: inline-block;
}

尽量让图片并排发生。

Answer 1

我认为您正在寻找的可能是这样的东西。

<h3>Friends</h3>
<div class="row">
 <div class="large-12 columns">
   <% @friends.each do |friend| %>
     <div class="large-3 columns">
        <div class="friends">
         <tr>
            <td><%= friend.full_name %></td><br/>
            <td><%= image_tag(friend.image_url)%></td><br/>
          </tr>
        </div>
     </div>
   <% end %>
 </div>
</div>

对于此示例，您不需要嵌套行。通过将 .large-3 列放在每个循环中，将为每个 friend 对象输出一个新列。

默认情况下，基础列将向左浮动，因此您无需添加任何内容即可让列按您希望的方式显示。

希望这对您有所帮助。