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

Posted 2023-02-26

技术标签:

【中文标题】Rails：如何在行而不是一列中显示图像【英文标题】：Rails: How to display images in rows rather than one column 【发布时间】：2011-05-23 11:24:50 【问题描述】：

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

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 来做一些特别的事情，或者也许有一种 rails 方式，任何帮助将不胜感激。

【问题讨论】：

【参考方案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>

【讨论】：

虽然表格可以达到预期的效果，但推广它们的使用并不是一个好主意——用于布局的表格不实用，并且违背了将内容 (HTML) 与样式 (CSS) 分离的想法。 @gryzzly，答案是关于一般方法而不是关于布局。你可以使用each slice 方法做任何你想做的事情他确实说过“或浮动 div”。基本方法在结构上是正确的。问题说明“我如何让它像这样显示？”。这些天来，视觉格式化是用 CSS 完成的。在我看来，没有标题的表格在结构上是不正确的。表格不应用于布局。使用 CSS【参考方案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;

【讨论】：

【参考方案3】：

如果是我。我会将其移至助手并使用 content_for 助手和 css 来构建您需要的布局。没有这个，有很多方法可以做你想做的事，但这不是一个好习惯。抱歉，这不是解决方案，但它是在这种情况下应该做什么的指南。祝一切顺利。让我们知道您的进展情况。

【讨论】：

【参考方案4】：

您可以定义一个具有宽度的 div，例如：