0

所以我最近开始使用 Zurb Foundation，并遵循这个文档。

我有以下代码链接到数据库中的所有设计。

<div>
  <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
  <% @designs.each do |design| %>
    <div><%= link_to design.title, design_path(design) %></div>  
  <% end %>
</div>

我需要为每个链接创建缩略图的帮助。只是为了了解它的要点，我想为所有缩略图使用相同的图片。我使用 a.th 类来包装图像，但我想学习如何在每一行上显示多个（通常是 3 个）缩略图。

所以假设总共有 9 个设计，我想要 3 行，每行 3 个缩略图。我找不到很多教程/解释，所以任何提示都有助于理解它是如何工作的。

4

1 回答 1

1

查看 Foundation 的块网格：http: //foundation.zurb.com/docs/components/block-grid.html。

我认为它只是你所追求的。要获得 3 x 3 的缩略图网格，将如下所示：

    <div>
      <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
        <div class="row">
          <ul class="small-block-grid-3">
            <% @designs.each do |design| %>
              <li><%= link_to design.title, design_path(design), class: "th" %></li>  
            <% end %>
          </ul>
       </div>
   </div>
于 2013-07-23T20:40:27.193 回答