确保垂直内容水平溢出

Question

TL; DR ：尝试水平溢出垂直块，类似于Windows＆＃34; metro＆＃34;接口。彩色块应保持垂直对齐，除非它们不适合，在这种情况下它们应该溢出到一个新列中（随着垂直尺寸的减小，块＆＃39;布局会在水平方向上增加尺寸）。

目前，我创建了一个显示以下内容的HTML页面：

在此标记内，存在以下元素：

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

我正在尝试定义CSS规则，以便当＆＃34;容器＆＃34;调整div的大小，彩色块水平溢出，如下面的屏幕截图所示：

使用纯CSS / SCSS可以实现吗？我是否需要使用JavaScript或动态创建新元素？

我试图使用以下SASS规则显示这样的布局，但无济于事：https://gist.github.com/psgs/cd87a1b3e70b35e264ec

非常感谢，
PSGS

Answer 1

如果您的块向左浮动（float:left），那么随着您增加div的宽度，块应自动向右移动，或者如您所说，应该水平溢出。