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;
}

我是一个新手并且努力学习，但我真的无法理解这一点。我不想要一张桌子。我可以创建一个垂直滚动框，但那不是我想要的。

非常感谢所有帮助

感谢

Answer 1

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

为了解决这个问题，我拿走了图片的浮动属性，给了他们的容器 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>

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

希望这有助于某人;我知道我会用它。

Answer 2

尝试向#main

添加“width”

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

}

画廊的水平滚动条

2 个答案: