Html 溢出-x堆栈窗口上的div调整大小

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

如您所见，当您调整窗口大小时，.column容器只是在窗口宽度太小而无法容纳它们时垂直堆叠

不应该

overflow-x: hidden 

---

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

您可以添加

float:left

到

.column

，这应该会给你想要的效果。如果要保持列之间的间距，则必须使用

margin

。

使用

overflow-x:hidden

将隐藏

div右侧超出的部分。但是
div
s的自然行为是，当它们没有空间时，会换行到下面的一行，因此没有什么会超过它。
您需要使
div
s不换行。如果将
空白：nowrap
添加到容器CSS中，它们将仅水平堆叠。
添加
空白：无换行
容器

---

搞定了。非常感谢！

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