响应式设计：2列posts，1个query，按css排序答案

【问题标题】：Responsive design: 2 columns of posts, 1 query, sorted by css响应式设计：2列posts，1个query，按css排序
【发布时间】：2013-09-13 12:05:17
【问题描述】：

我正在构建一个 wordpress 主题。帖子按发布日期降序查询显示，例如：

post6
post5
post4
post3
post2
post1

我想要做的是根据它们的类别将这些帖子分为 2 列，但保持日期顺序。例如：

Category1 | Category2
post6     | post5
post3     | post4
          | post2
          | post1

我知道我可以执行 2 个单独的查询，但我不想这样做。

为了响应式设计，如果我将窗口大小调整为移动设备，我希望所有帖子都按日期顺序返回（见顶部），因此是单个查询。

有没有办法只用 CSS 实现排序（左右排序）？

我试过浮动或绝对定位，但都没有正确实现排序。这不一定是 wordpress 问题，因为数据可能来自任何来源。

感谢任何帮助。

【问题讨论】：

【解决方案1】：

可能的解决方案

确保每个帖子都在一个专用元素内输出，同时将当前帖子类别指定为该元素的类

使用 CSS 根据类别分类将它们分开

【讨论】：

我将如何使用 css 将它们分开？这就是我坚持的一点。我理解基于类别定义类。干杯。
这样想：CSS 用于为现有元素添加样式，而 php 用于生成 HTML DOM 结构 - 它可以有条件地创建您可以使用 CSS 设置样式的元素。因此，除非您生成适当的元素供 CSS 处理，否则使用“仅 CSS”是不可能的。
你可以按照我的例子，将所有内容输出到一个父div中，然后，由于你只有两个类别，你可以添加基于类别的css样式在父div中向左或向右浮动。跨度>
另外请记住，一旦页面被解析并发送到客户端，您将需要一些 javascript 来检测用户交互，例如调整窗口大小，因此您可以切换分配给元素来移动内容。此时，服务器已经处理了 php，生成了 html dom 结构，将 html 和 css 发送到客户端，现在客户端接管了正在发生的事情。因此，如果客户端调整窗口大小，服务器将无法看到（除非您在您的情况下不建议您传达该信息）
但是如果你只关心手机还是不手机，用wordpress(php)，你可以使用if(wp_is_mobile()) {...} else{...} 条件来检测是否是移动设备发出查看页面的请求。然后，您可以输出适当的 HTML 元素，允许在两列与一列中查看。