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

サムネイルのレイアウトに表を使用している理由はありますか? テーブルは、実際には表形式のデータにのみ使用する必要があります。サムネイルをフローティングする方が良い選択でしょうか?

<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 に答える
0

水平スクロールを作成する場合は、含まれる div の幅を 100% にする必要があります。このテーブルが何であれ、定義された幅に設定されており、その幅に達すると、均等にスペースを空けようとしていると思います。

于 2013-08-15T14:48:33.077 に答える
0

テーブルを捨てることをお勧めします。インライン ブロックを使用して親指を表示します。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;
}
于 2013-08-15T14:51:45.793 に答える