1

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

我是一个新手，努力学习，但我真的无法弄清楚。我不想要一张桌子。我可以创建一个垂直滚动框，但这不是我想要的。

请大家帮助非常感谢

谢谢

4

2 回答 2

0

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

为了解决这个问题，我去掉了图像的 float 属性，并给它们的容器一个white-space: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>

页脚段落被告知有一定的宽度，使用滚动条进行溢出，并禁止换行。因此，图片被迫表现得好像它们是浮动的，因为它们不允许下降到下一行。

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

于 2011-05-26T20:15:33.013 回答
0

尝试向#main 添加“宽度”

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

}
于 2011-05-26T20:23:06.003 回答