停止包含div？

Question

我目前在容器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>

style.css中:

.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}  

.element {
width:100px;
float:left;
}

这是代码的jsFiddle:http://jsfiddle.net/vZWTc/.

所以,我希望每个元素彼此相邻排列(一行中所有4个),但只有前两个元素可见(容器是200px,每个元素是100px,所以一次只能看到2个) ,用户可以(水平)滚动到第3和第4个元素(因为它们不太重要)

但是,通过此设置,元素3和4将换行到下一行

更新容器类white-space:nowrap没有任何作用.这只会影响文本,而不会影响div.

有任何想法吗？提前致谢!

Answer 1

使用包含4个元素总宽度的包装div,并将容器设置为隐藏溢出,html示例...

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

而对于CSS

.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }