我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效.
我想让一组左浮动的div运行,水平的父div与水平滚动条.
我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/
但是,根据SO*给出的答案,这应该有效,但不是我的结论. http://jsfiddle.net/ajkochanowicz/tSpLx/2/
有没有办法在不定义每个项目的绝对定位的情况下做到这一点?
我目前在容器div中设置了div,如下所示:
<div id="container">
<div id="element"> Element 1 content </div>
<div id="element"> Element 2 content </div>
<div id="element"> Element 3 content </div>
<div id="element"> Element 4 content </div>
</div>
Run Code Online (Sandbox Code Playgroud)
style.css中:
.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}
.element {
width:100px;
float:left;
}
Run Code Online (Sandbox Code Playgroud)
这是代码的jsFiddle:http://jsfiddle.net/vZWTc/.
所以,我希望每个元素彼此相邻排列(一行中所有4个),但只有前两个元素可见(容器是200px,每个元素是100px,所以一次只能看到2个) ,用户可以(水平)滚动到第3和第4个元素(因为它们不太重要)
但是,通过此设置,元素3和4将换行到下一行
更新容器类white-space:nowrap没有任何作用.这只会影响文本,而不会影响div.
有任何想法吗?提前致谢!