html - 如何将 wordpress 博客页面拆分为 2 列响应式布局？

Question

我很想知道您将如何为 wordpress 循环中的帖子创建 2 列布局。

1 | 2

3 | 4

5 | 6

上面是博客页面应该如何显示的示例 - 但是帖子并不是都具有相同的高度(这意味着我不能简单地使用 css float 规则 - 因为帖子不会向上推- 例如

1 | 2

. | 2

3 | 4

我也不热衷于使用文档齐全的砌体插件，因为我确信必须有一种“更轻松”的方法来解决这个问题。

最重要的是，我希望这些列能够响应浏览器屏幕宽度。

在这种情况下，他们应该属于

1

2

3

4

等等

任何建议都将非常有用 - 提前致谢

更新

我已经尝试将帖子成对放置 - 这确实对浏览器调整大小做出了很好的响应。但是我在下面说明了一个问题

这里的帖子可以均匀地分布在 2 列中 - 但是对于不同高度的帖子 - 会发生以下情况:

这是我希望发生的事情 - 让帖子相互堆叠:

Answer 1

所以你需要知道的是Modulo。 http://en.wikipedia.org/wiki/Modulo_operation最简单的形式是交替行等的好方法，但几乎用于所有编程语言。这是您将如何做您想做的事情的示例...

$posts = array(1,2,3,4,5,6);

echo "<div class ='new_row'>";
for($i=0;$i<count($posts);$i++)
{
  if(($i % 2)==0){
   //create new post container
   echo "<div class = 'post'>"+$post[$i]+"</div>";
   //close row holding two posts
   echo "</div>"
   //start new row for next 2 posts
   echo "<div class ='new_row'>";
  }else{
      //create new post container
      echo "<div class = 'post'>"+$post[$i]+"</div>";
  }
}
echo "</div>";

基本上发生的事情是，我们创建了第一行的 2 个帖子，它开始循环，在左侧输入一个帖子，然后在右侧输入一个帖子，关闭该行然后打开一个新行。您需要为循环以奇数结束的情况添加一个 catch。