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;
}

Answer 2

如果您正在寻找创建水平滚动，那么您的包含div必须是100％的宽度。我猜测无论这个桌子在哪里都设置为一个定义的宽度，一旦你达到那个宽度，它就会试图在内部同等空间。

Answer 3

我建议放弃桌子。使用内联块显示您的拇指。 JSFiddle

<强> HTML

<div class="gallery span12" id="assignment_group_container">
  <div class='inner'>
  <div class='thumb' id='Ab_Crunch Machine'>
    <img alt="50" src="http://placekitten.com/50/50" />
    <p>Ab Crunch Machine</p>
  </div>
  <div class='thumb' id='Ab_Crunch Machine'>
   <img alt="50" src="http://placekitten.com/50/50" />
   <p>Ab Crunch Machine</p>
  </div>
  </div>
</div>

<强> CSS

.gallery {
  background: #efefef;
  height: 150px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 400px;
  width: 400px;
}

.thumb {
  display: inline-block;
  height: 50px;
  width: 50px;
}

.inner {
  width: 800px;
}

Answer 4

您是否有理由使用表格来布置缩略图？表应该只用于表格数据。也许浮动缩略图会是更好的选择吗？

<ul>
    <li><img src="whatever" /></li>
    <li><img src="whatever" /></li>
</ul>

ul {
    list-style: none;
}
li {
    float: left;
    width: whatever;
}

Answer 5

我会使用一个列表来执行此操作并将列表放在容器中以启用滚动条，如下所示：

HTML：

<div id="thumbs">
  <ul>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
    <li>template content</li>
  </ul>
</div>

CSS：

#thumbs { 
    width: 100%; 
    overflow: auto; }

ul { 
    width: 1000px;
    list-style: none;}

li { float: left; }

小提琴：http://jsfiddle.net/P6jSh/1/

当然，实际上你可能不知道会有多少个li元素，所以你可能无法在ul上设置固定的宽度。如果是这种情况，您可能需要使用少量的jQuery来查找li的数量，按拇指的宽度计算，并将该宽度应用于ul。

在水平布局中显示缩略图

5 个答案: