Question

目前我的代码会产生如下视图：

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可以做一些特别的事情，或者也许有一种轨道方式，任何帮助都会受到赞赏。

Answer 1

你可以做一个表（或浮动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>

Answer 2

你必须使用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;
    }

Answer 3

如果是我。我会将其移动到帮助程序并使用content_for帮助程序和css来构建所需的布局。如果没有这个，有办法做你想做的事，但这不是好的做法。对不起，这不是一个解决方案，但它是在这种情况下应该做什么的指南。祝一切顺利。让我们知道你是如何上场的。

Answer 4

您可以定义宽度为div的div：

div.content
{
width: 305px;
}

在该div中放置图像。每行显示的图像数量取决于div的宽度和图像的宽度。

这种方法的优势在于它完全是在设计而非代码中完成的。

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

4 个答案: