css - 操纵多列内容的响应式设计

Question

我想根据屏幕/设备宽度实现具有 1 列或 2 列的 UI。我正在使用 Ajax 将数据加载到这两列中，并根据这些元素的高度附加数据，因此两列都需要大约。相同数量的垂直空间。

如果用户始终保持浏览器窗口大小不变，则一切正常，因为初始加载将填充 1 或 2 列。但是，当用户调整窗口大小时，问题就出现了，我必须相应地合并所有内容:

• 较小的尺寸隐藏了第 2 列，它的所有元素应按正确顺序插入到第 1 列
• 较大的尺寸显示两列并从第 1 列中提取一些内容并将其放入第 2 列

我可以使用 Javascript 来做到这一点，但我想知道是否可以只用 CSS 来做同样的事情？

Google+ 就是一个例子，它根据内容宽度使用 1..3 列。

Answer 1

I came up with a solution of my own

仅使用 CSS 是可能的，但可能不可行

在资源消耗方面是可行的。在页面上添加元素时，请始终将它们所有 放在第 1 列中，并为您也在第 2 列中放置的元素添加一个额外的 CSS 类。

响应式媒体查询将:

1. 隐藏第 2 列并在第 1 列中显示那些额外的元素(基于 CSS 类)。
2. 显示第 2 列并隐藏第 1 列中具有适当 CSS 类的元素

这是在用户调整浏览器窗口大小时避免 Javascript 处理的唯一方法。

问题

此功能的唯一问题是当您显示大量元素时，因为您的 DOM 将平均多出 50% 的节点，因为大约一半的元素将在整个页面上重复(即使只有这些元素的一个副本将一次显示重复项)。