jquery - Jquery Tools Horizo​​ntal Scrollable へのコンテンツ (画像とテキスト) の追加

Question

Jquery Tools Horizo​​ntal について言及しています。 http://flowplayer.org/tools/demos/scrollable/index.htm

しかし、画像タグの下にテキストを追加した後、すべてが揃っていないコンテンツ (画像 + テキスト) の表示に問題があります。全体的に、各アイテムの下に画像とテキストを含むコンテンツを表示する必要があります。

誰でもこれで私を助けることができますか？

...ここに画像... ...画像 1 のテキスト...

Answer 1

OK、基本的には内部を設定することで問題を解決したと思います<div>

class=items はすべてのアイテムを表します (class=items の後は、いくつかのコンテンツの各ブロックを表します) class=items は各アイテムを表します。

HTML コード:

<div class="scrollable">
  <div class="items">
    <div> <!-- Represent each block of several contents -->
      <div class="item">
        <div class="image"> 
          <a href="file.php?id=1"> 
            ...image here..
          </a>
        </div>
        <div class="content"> 
          ...Content here...
        </div>
      </div>
      <div class="item">
        <div class="image"> 
          <a href="file.php?id=1"> 
            ...image here..
          </a>
        </div>
        <div class="content"> 
          ...Content here...
        </div>
      </div>
   </div>
  </div>
</div>

CSS コード: 以下のコードを使用して元の CSS コードを置き換えます。

    .scrollable .items .item {
float:left;
margin:20px 30px 30px 30px; 
background-color:#fff; 
padding:2px; 
border:1px solid #ccc; 
width:160px; 
height:128px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.scrollable .items .item .image{
    float:left;
    width:180px;    
}

.scrollable .items .item .content{
    padding-top:5px;
    float:left;
    width:160px;    
}

[重要] ** * ".scrollable .items .item"は幅を設定する必要があります。そうしないと、複数のスクロール可能なコンテンツの各ブロックに対してのみ 1 つのコンテンツ アイテムが表示されます。スクロール可能な .items .item .content" . * **