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

Question

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

如果用户始终保持浏览器窗口大小相同，一切都很好，因为初始加载将填充 1 或 2 列。但是当用户调整他们的窗口大小时，问题就出现了，我必须相应地整合所有内容：

• 较小的尺寸隐藏第 2 列，并且它的所有项目都应以正确的顺序插入第 1 列
• 较大的尺寸显示两列并从第 1 列获取一些内容并将其放入第 2 列

我可以使用 Javascript 来执行此操作，但我想知道是否可以仅以 CSS 方式执行相同操作？

这方面的一个例子是 Google+，它可以根据内容宽度使用 1..3 列。

Answer 1

我想出了我自己的解决方案

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

在资源消耗方面是可行的。在页面上添加项目时，请始终将它们全部放在第1 列中，为那些您也放置在第 2 列中的项目添加一个额外的 CSS 类。

然后，响应式媒体查询将：

1. 隐藏第 2 列并在第 1 列中显示这些附加项目（基于 CSS 类）。
2. 显示第 2 列并在第 1 列中隐藏具有适当 CSS 类的项目

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

问题

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