从rails视图中的循环图片中为每幅图片创建新的zurb基础列
从rails视图中的循环图片中为每幅图片创建新的zurb基础列
提问于 2014-12-04 20:54:52
我正在使用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>它显示了多张图片。我要做的是为每个图片创建一个“大-3列”，而不是在一个“大-3列”中显示所有的图片。这些照片应该并排在一起。
我主要集中在rails上的红宝石，而在前端则更少。在我的application.css中我添加了以下内容
.friends {
display: inline-block;
}试着让这些照片并排出现。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-05 01:14:59
我想你要找的可能是这样的。
<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对象输出一个新列。
默认情况下，Foundation列将向左浮动，因此您不应该需要为列添加任何要显示的内容，因为您希望它们显示出来。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27303882
复制相关文章
相似问题
腾讯云开发者
