Только горизонтальная прокрутка с CSS - PullRequest
Новая
       50

Только горизонтальная прокрутка с CSS

1 голос
/ 22 февраля 2012

в галерее изображений, над которой я работаю, я хочу горизонтальную прокрутку (т. Е. Миниатюры перечислены в горизонтальном положении), и область, содержащая их, должна иметь фиксированную ширину с прокруткой, если есть много, чтобы соответствовать области.

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

Заранее спасибо! 

#thumbnailArea {
    padding: 5px;
    width: 600px;
    height: 90px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
}

enter image description here

HTML-код для области миниатюр (создается с помощью ASP.net webforms) выглядит следующим образом: 

<div id="thumbnailArea"> 

            <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

            <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on...

</div>

Ответы [ 3 ]

2 голосов
/ 22 февраля 2012

Это потому, что контейнер соответствует ширине, которую вы указали. Для достижения желаемого эффекта вы должны использовать два вложенных элемента div: внешний с заданной шириной и внутренний, содержащий изображения.

Пример: http://jsfiddle.net/jTJFa/1/

Html 

<div class="box">
    <div class="area">
        <img/>
        ...
    </div>
</div>

Css: 

.box {
    width: 500px;
    overflow-x: scroll;
}

.area {
    width: 1000px;
}
1 голос
/ 22 февраля 2012

Чтобы это работало, вам нужен div внутри div с миниатюрами шириной, чтобы все изображения помещались внутрь: 

<div id="thumbnailArea"> 
    <div style="width: 1000px;">
         <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

        <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

       and so on...
    </div>
</div>

Это должно сработать, измените ширину, чтобы у вас не было массивного пустого пространства в конце

1 голос
/ 22 февраля 2012

Несмотря на то, что вы отключили вертикальную прокрутку, ширина #thumbnailArea не изменяется (и, как следствие, вызывает перенос). Это должно сделать трюк: 

#thumbnailArea {
 white-space:nowrap;
}
...