html - 画廊的水平滚动条

Question

我真的用这个把我的头发拉出来了。我在这里坐了大约 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;
}

我是一个新手，努力学习，但我真的想不通。我不要 table 。我可以创建一个垂直滚动框，但这不是我想要的。

非常感谢大家的帮助

谢谢

Answer 1

我知道这是一个老问题，但我想说的是我不认为 float 是那样工作的。任何具有左浮动或右浮动的元素将覆盖您的设置并在下一行为自己腾出空间。

为了解决这个问题，我去掉了图像的 float 属性并给它们的容器一个 white-space:nowrap;

你可以看到我用代码做了什么 here , 在行动中。

这是 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>

页脚段落被告知要有一定的宽度，使用滚动条来溢出，和不允许换行。因此，图片被迫表现得好像它们是 float 的，因为不允许它们掉到下一行。

希望这对某人有帮助；我知道我会使用它。