Горизонтальная полоса прокрутки для миниатюр

Question

У меня есть миниатюра с imgs в div, так что, когда я нажимаю img, он показывает большой размер в том же окне. Я хочу прокручивать по горизонтали, чтобы увидеть их, а не по вертикали по умолчанию. Мне удалось скрыть полосу прокрутки y, используя:

overflow-x: auto; 
-ms-overflow-x: auto; 
overflow-y: hidden; 
-ms-overflow-y: hidden;

Теперь, как мне сделать так, чтобы на изображениях не было горизонтального предела, а не вертикального. мои фото предоставлены:

<div class='item'>
<img src='picaddress.jpg' alt='picDescription' />
<p>'picDescription'</p>

дополнительный код:

<div id="imagegallery">
<div id="items">
        <div class='item'>
        <img src="images/img1.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img2.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img3.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img4.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img5.jpg" alt="Test Image">
        <p>'Test Image'</p>
        </div>
    </div>
</div>
</div>

CSS:

#imagegallery{
    background:#F2F2F2;
    padding:10px 10px 10px 10px;
}

#imagegallery #items{
    width: 100%;
    border: 1px solid #DFDFDF;
    background:white;
    height: 100px;
    overflow: auto;

}

#imagegallery #items .item {
    float: left;
    padding:5px;
    position: relative;
    width: 102px;
    height:77px;
    margin: 10px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid white;
    display: inline;
}

#imagegallery #items .item:hover{
    border: 1px solid #ddd;
}

#imagegallery #items .item img {
    max-width:100px;
    max-height:75px;
    width:100px;
}

#imagegallery #items p{
    display:none;
}

Это динамическая страница, поэтому количество фотографий меняется.

Answer 1

Вы можете использовать "ul" в вашем div и отображать как man "li" в "ul", как вы хотите, в одной строке.Затем, чтобы показать еще одну строку изображений ниже, просто повторите "ul &" li "s

Exmaple:

<div id="images">
    <ul>
        <li><img src="images/rings/thumbnails/image1.jpg"></li>
        <li><img src="images/rings/thumbnails/image2.jpg"></li>
        <li><img src="images/rings/thumbnails/image3.jpg"></li>
        <li><img src="images/rings/thumbnails/image4.jpg"></li>
        <li><img src="images/rings/thumbnails/image5.jpg"></li>
    </ul>
</div>

Затем вы можете просто стилизовать" div "," ul "и"li" с css. См. пример страницы, у меня есть здесь . Каждая строка изображений - это "ul" с 5 "li" в ней. Вы можете скопировать код, если считаете,это полезно.

Answer 2

Надеюсь, я вас правильно понял, и вы хотите, чтобы изображения отображались рядом друг с другом, а не под друг другом.

Чтобы сделать это, вы можете использовать свойство float в div с классом "item", например так:

div.item {
float: left;
width: 100px;
}

Не забудьте очистить после пунктов.

Если ширина всех элементов больше, чем ширина окружающего элемента div (с помощью overflow-x: scroll), вы получите то, что хотите.

---

Пример создан в http://jsfiddle.net/deCube/Ctja7/.