Css 为Rails视图中的循环图片创建新的ZURB基础列 我正在使用Zurb基金会来引导我的应用程序。目前，我在视图中看到了类似的情况 <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>

试着让图片并排出现

我想你要找的可能是这样的东西

<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列放置在each循环中，将为每个friend对象输出一个新列

默认情况下，基础列将向左浮动，因此您不必为要显示的列添加任何内容。

---

希望这有帮助。

不要忘记，如果内容的高度可变，则需要通过每n列添加.row（本例中为4列）来清除浮动。

<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>