0

我想在水平布局中显示一些缩略图及其名称。由于可能有很多这样的缩略图，我希望包含的 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>
4

5 回答 5

3

您真正需要的只是一种禁用包装的方法。这将允许您放弃桌子，并且无需提前知道任何东西的宽度。

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;
}
于 2013-08-15T14:57:30.783 回答
0

如果您希望创建水平滚动，那么您的包含 div 的宽度必须为 100%。我猜想无论这张桌子在哪里，都被设置为一个定义的宽度，一旦你达到这个宽度，它就会试图在里面均匀地间隔开。

于 2013-08-15T14:48:33.077 回答
0

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

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;
}
于 2013-08-15T14:51:45.793 回答
0

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

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

ul {
    list-style: none;
}
li {
    float: left;
    width: whatever;
}
于 2013-08-15T14:53:06.140 回答
0

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

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。

于 2013-08-15T14:53:14.023 回答