html - overflow-x 在窗口调整大小时堆叠 div

Question

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

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

如您所见，当您调整窗口大小时，当窗口的宽度太小而无法包含所有容器时，.column 容器只会垂直堆叠。

不应该

overflow-x: hidden 

当 .column 类从 .container 一侧运行时停止显示它们？

Answer 1

withoverflow-x: hidden将隐藏超出您右侧的内容div。但是divs 的自然行为是当它们空间不足时换行到下面的行，因此没有超过。您需要使divs 不换行。如果您将white-space: nowrapCSS 添加到容器中，它们只会水平堆叠。

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如果您想保持列之间的间距，则必须使用。