html - 以水平布局显示缩略图

Question

我想在水平布局中显示一些缩略图及其名称。由于这些缩略图可能有很多，我希望包含的 div 有一个水平滚动选项。目前我将每个缩略图放在一个表行中，但这会导致最后几个缩略图相互挤压。 这是我当前的代码:

<div class="span12" id="assignment_group_container" style="overflow-x: scroll;">
  <table>
    <tr>
      <% @pp.assignment_group.each_with_index do |ag, i| %>   
        <td id="<%= ag[0].gsub(" ", "_") %>" class="span2" >
          <%= image_tag "http://placekitten.com/50/50" %>
          <br/>
          <%= ag[0] %>
        </td>
      <% end %>
    </tr>
  </table>
</div>

关于如何获得我想要的效果有什么想法吗？

编辑:添加实际生成的 HTML

<div class="span12" id="assignment_group_container" style="overflow-x: scroll;">
  <table>
    <tr>
      <td id="Ab_Crunch_Machine" class="span2" >
        <img alt="50" src="http://placekitten.com/50/50" />
        <br/>
        Ab Crunch Machine 
      </td>

      Multiple <td> elements...
    </tr>
  </table>
</div>

Answer 1

您真正需要的是一种禁用换行的方法。这将允许您放弃表格，并且无需提前知道任何内容的宽度。

http://cssdeck.com/labs/weg5rsvz

标记:

<div class="span12" id="assignment_group_container">
  <figure id="Ab_Crunch_Machine">
    <img alt="50" src="http://placekitten.com/50/50" />
    <figcaption>Ab Crunch Machine</figcaption>
  </figure>
  <!-- repeat the figure... -->
</div>

CSS:

#assignment_group_container {
  overflow-x: scroll;
  white-space: nowrap;
}

#assignment_group_container figure {
  display: inline-block;
}