ОК, я думаю, что в основном я решил проблему, установив некоторые внутренние <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 элемент контента будет отображаться только для каждого блока из нескольких прокручиваемых контентов. Так что ". items .item .image " and ". прокручиваемый .items .item .content ". ***