Блог

Я имею в виду инструменты Jquery по горизонтали, http://flowplayer.org/tools/demos/scrollable/index.htm

Но у меня проблема с отображением содержимого (изображение текст), где все не выровнено после того, как я добавил текст под тегом image. В целом мне нужно показывать содержимое, под которым есть изображение текст для каждого элемента.

Кто-нибудь может мне помочь с этим?

…Изображение здесь … …Текст для изображения 1…

Оберните ваши изображения и текст с помощью div s.

Хорошо, я думаю, что в основном я решил проблему, настроив некоторые внутренние <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;    
}
  

[ВАЖНО]
** *«.scrollable .items .item» НЕОБХОДИМО задать ширину, иначе 1 элемент содержимого будет отображаться только для каждого блока из нескольких прокручиваемых содержимого., так же сделайте «.scrollable .items .item .image» и «.scrollable .items .item .content». ***