Rails：如何以行而不是一列显示图像

问题描述

| 目前，我的代码生成的视图如下所示：

Lessons Start Now!
x
x
x
x
x
x

（其中x =图片） 我想知道如何使其显示如下：

Lessons Start Now!
x   x   x
x   x   x

这是我的index.html.erb代码

<h1>Lessons Start Now!</h1>
<% @lessons.each do |lesson| %>
    <%= image_tag(lesson.image,:size => \"100x50\") %><br />
    <%= lesson.subject %><br />
<% end %>
<%= link_to \'New Lesson\',new_lesson_path %>

我唯一能想到的就是编写一个有计数的for循环。它将把第一个图像插入一个div类，然后一旦count = 3，它将把接下来的3个图像插入另一个div。也许可以使用ul和li进行一些特殊的操作，或者有一个方法，任何帮助将不胜感激。     

解决方法

您必须使用CSS来做您想要的事情，假设这是您的模板：

<h1>Lessons Start Now!</h1>
<% unless @lessons.empty? %>
<ul class=\"lessons\">
<% @lessons.each do |lesson| %>
    <li>
    <%= image_tag(lesson.image,:size => \"100x50\",:class => \"thumbnail\") %>
    <p class=\"subect\"><%= lesson.subject %></p>
    </li>
<% end %>
</ul>
<% end %>
<%= link_to \'New Lesson\',new_lesson_path %>

然后，这就是您的CSS：

.lessons {
  /* this is needed for the parent 
     to have height. read more 
     http://css-tricks.com/all-about-floats/
  */
  overflow:hidden;
  /* adjust width of this element
     if its width is not limited by its parent
  width: 300px;
  */
}
    .lessons li {
        /* add margins and paddings as you wish */
        float:left;
    }

    ,您可以做一个表格（或浮动div）

<table>
  <% @lessons.each_slice(3) do |lessons| %>
    <tr>
      <% lessons.each do |lesson| %>
        <td>
          <%= image_tag(lesson.image,:size => \"100x50\") %><br />
          <%= lesson.subject %>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

    ,如果是我。我将其移至辅助程序，并使用content_for辅助程序和CSS构建所需的布局。没有这种方法，有很多方法可以做您想做的事情，但这并不是一个好习惯。抱歉，这不是解决方案，而是在这种情况下应采取的措施的指南。祝一切顺利。让我们知道您的身体情况如何。     ,您可以使用宽度定义div，例如：

div.content
{
width: 305px;
}

在该div中放置图像。每行显示的图像数量将取决于div的宽度和图像的宽度。 这种方法的优势在于，它完全是在设计中完成的，而不是代码。