无法产生horizo​​nzal滚动使用CSS

Question

我有HTML的结构是这样的：

<div class="wrapper"> 
    <div class="fixed_column"></div> 
    <div class="fixed_column"></div> 
    <div class="fixed_column"></div> 
</div> 

这里是我的CSS：

.wrapper{ 
    width:500px; 
    float:left; 
    /*overflow-y:scroll;*/ 
    overflow-x:scroll; 
} 

.fixed_column{ 
    float: left; 
    height: 600px; 
    position: relative; 
    width: 250px; 
} 

所以我想只有两列，以适合我wrapper内。所以没有第三列出现在里面。

一旦我添加第三列像上面的HTML一样，第三列不会留在同一行，但它会下降到下一行，我 结束了垂直滚动而不是水平 。添加overflow-x到我的CSS，我没有得到一个水平滚动条，但第三列仍然下降到下一行。

但是我试图增加wrapper到750px这次所有三列都放在同一行，所以我认为我的CSS没有错，或者我认为是错的？

为什么一旦我的wrapper是500px就不会有水平滚动，我有三列，每列都有width:250px。

Answer 1

这是因为你的固定列divs只有250像素，所以他们从来没有打破505px容器，他们目前都在

这里试试这个。

例如：

<div class="wrapper"> 
    <div class="scroll-container"> 
     <div class="fixed_column">A</div> 
     <div class="fixed_column">B</div> 
     <div class="fixed_column">C</div> 
    </div> 
</div> 


.wrapper { 
    width: 505px; 
    position:relative; 
    overflow-y: scroll; 
    overflow-x: scroll; 
} 
.scroll-container { 
    width:1000px; 
} 
.fixed_column { 
    float: left; 
    height: 600px; 
    position: relative; 
    width: 250px; 
    background-color: green; 
} 

Answer 2

添加空格：nowrap;到容器，使用内联块而不是float，并使用overflow-x而不是overflow-y。

这工作：

http://jsfiddle.net/vXqY2/

.wrapper { 
    width: 600px; 
    white-space: nowrap; 
    overflow:scroll; 
} 
.fixed_column { 
    display: inline-block; 
    height: 100px; 
    width: 250px; 
    background-color: red; 
} 

Answer 3

的浮动元素将要自动向下换到下一电平，如果他们才开始关闭父容器的右侧。这就是花车的工作原理。为了让他们在同一行，你有几种选择：

• 让父容器更宽的（像你一样），但你需要一个额外的元素的滚动条
• 开关从float: left;到display: inline-block; （如@Alex建议），但你需要为IE7做出让步。
• 从float: left;切换到display: table-cell;。不推荐这个，我试了一下，原来这是一种痛苦的:-P的

查看所有技术在jsFiddle demo