горизонтальная полоса прокрутки для галереи - PullRequest
Новая
       0

горизонтальная полоса прокрутки для галереи

1 голос
/ 26 января 2011

Я действительно тяну свои волосы с этим. Я сидел здесь около 5 + часов плюс попытка выяснить это и проб / ошибок. У меня есть центральная страница с фиксированной шириной, и я хочу установить пространство в середине для галереи с горизонтальной прокруткой. это доказывает большую проблему.

это мой css: 

#container {
 height: 800px;
 width: 950px;
 margin: auto;
 overflow: visible;
}
#header {
 background-image: url(images/header.gif);
 height: 155px;
 width: 950px;
}
#main {
 height: 417px;
 overflow-x: scroll;
 overflow-y: hidden;
 width: auto;
 background-color: #000;
 float: left;
 /* [disabled]white-space: nowrap; */
 /* [disabled]overflow: scroll; */
}
#footer {
 background-image: url(images/footer.gif);
 height: 128px;
 width: 950px;
 background-repeat: no-repeat;
 clear: both;
}
.text {
 font-family: "Arial Narrow", Futura-Book, sans-serif;
 font-size: 70%;
 width: 14px;
}
.pics {
 padding-left: 10px;
 float: left;
 padding-top: 10px;
 overflow-x: scroll;
 overflow-y: hidden;
}

Я новичок и очень стараюсь учиться, но я действительно не могу понять это. я не хочу стол. я могу создать вертикальную прокрутку, но это не то, что я хочу.

Пожалуйста, помогите всем очень ценится

спасибо

Ответы [ 2 ]

0 голосов
/ 27 мая 2011

попробуйте добавить "ширину" к # main 

#main {
 height: 417px;
 overflow-x: scroll;
 overflow-y: hidden;
 width: auto;
 background-color: #000;
 float: left;
 width:950px;

}
0 голосов
/ 27 мая 2011

Я знаю, что это старый вопрос, но я хотел сказать, что я не думаю, что float работает таким образом.Любой элемент с поплавком влево или вправо будет переопределять ваши настройки и освободить место для себя на следующей строке.

Чтобы исправить это, я забрал свойство float для изображений и дал ихконтейнер a пробел: nowrap;

Вы можете увидеть, что я сделал с кодом здесь , в действии.

Это CSS: 

#footer {
    white-space: nowrap;
    float:left;
    background-color:grey;
    max-height: 128px;
    width:950px;
    background-repeat: no-repeat;
    overflow: scroll;
    clear: both;
}
.pics {
    height:98px;
    padding-left:10px;
    padding-top:10px;
    float:;
    overflow-x:;
    overflow-y:;
}

А вот HTML-код, который я использовал, чтобы вызвать ситуацию переполнения: 

<p id="footer">

    <img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" />
    <img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" /><img class="pics" alt="Picture 1" title="Banana stand? hahaha" src="http://i.stack.imgur.com/Dx2IF.jpg" />
    <img class="pics" alt="Picture 2" title="That's pretty witty" src="http://i.stack.imgur.com/2Gwbn.jpg" />
    <img class="pics" alt="Picture 3" title="TV time" src="http://i.stack.imgur.com/LYa29.png" />

</p>

В нижнем колонтитуле указана определенная ширина, чтобы использовать полосу прокрутки для переполнения, и , чтобы запретить переносы строк.Таким образом, изображения вынуждены вести себя , как если бы они были плавающими, поскольку им не разрешено переходить на следующую строку.

Надеюсь, это кому-нибудь поможет;Я знаю, что собираюсь использовать это.

...