css - 合并两列，如 zip - 最佳模式

Question

我有两列带有一些框，例如调查、日历、推特等，它们的高度未知。如果用户的屏幕较小，我只想将它们组合成一列，例如 zip - 从第一列中取出第一个框，然后从第二列中取出第一个框，从第一列中取出第二个框...

有没有什么好的模式可以正确地做到这一点，最好是使用在 DOM 模型上运行的最少的 JavaScript 代码？

Answer 1

不久前，我创建了这个 CodePen，它演示了使用列计数在同一个容器中运行 2 列。

使用此 CSS，您可以通过在媒体查询中设置内容以特定宽度将内容分布在两列中。

.columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}