画廊的水平滚动条

即时将我的头发拉出这一个。我在这里坐了大约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; 
}

我是一个福利局，并试图这么难学，但我真的不能想出解决办法。我不想要一张桌子。我可以创建一个垂直滚动框，但那不是我想要的。

请所有帮助非常感谢

感谢

来源

2011-01-26 pylon

即使我不明白的问题。它可能是你使用宽度：自动，溢出X：滚动和浮动在一起，这似乎有问题。你必须在这种情况下设置宽度 – 2011-01-26 19:05:08

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

为了解决这个问题，我拿走了图像的浮动属性，并给他们的容器一个白色空间：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>

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

希望这可以帮助别人;我知道我会用它。

来源

2011-05-26 20:15:33 worc

尝试添加一个“宽”到#main

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

}

来源

2011-05-26 20:23:06 AlexC

画廊的水平滚动条

回答

相关问题