overflow-x堆栈窗口调整大小的div

Question

我想设置一个水平容器，其中包含多个（较小的）列。我有以下设置：

http://jsfiddle.net/f464W/1/

正如您所看到的，当您调整窗口大小时，.column容器只是在窗口宽度太小而无法全部包含时才垂直堆叠。

不应该

overflow-x: hidden 

当.column类在.container一侧运行时停止显示？

Answer 1

overflow-x: hidden会隐藏div右侧超出的内容。但div s的自然行为是当它们离开太空时包裹在下面的线上，因此没有超出。 您需要使div不包装。如果你将white-space: nowrap添加到容器CSS中，它们只会水平堆叠。

Answer 2

添加white-space: no-wrap .container

http://jsfiddle.net/feitla/f464W/17/

.container {
    max-height: 600px;
    width: 100%;
    margin-top: 100px;
    background: red;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}

Answer 3

您可以将float: left;添加到.column，这样可以获得所需的效果。如果您想保持列之间的间距，则必须使用margin。