jquery - 将内容（图像和文本）添加到 Jquery 工具中水平滚动

Question

我指的是Jquery Tools Horizo​​ntal， http: //flowplayer.org/tools/demos/scrollable/index.htm

但是我在显示内容（图像+文本）时遇到问题，在我在图像标签下添加一些文本后，所有内容都没有对齐。总的来说，我需要为每个项目显示包含图像+文本的内容。

谁能帮我这个？

...此处的图片... ...图片 1 的文字...

Answer 1

用 s 包裹您的图像和文本div。

Answer 2

好的，我想基本上我已经通过设置一些内部解决了这个问题<div>

class=items 表示所有项目（class=items 之后，表示每个块的若干内容） class=item 表示每个项目。

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

[IMPORTANT] ** * ".scrollable .items .item"必须设置宽度，否则 1 个内容项将仅显示每个块的多个可滚动内容。因此，".scrollable .items .item .image"和".可滚动的 .items .item .content”。* **