PHP显示WHILE循环中的3列块

Question

我试图建立一个网站（博客），模仿新www.digg.com网站的布局。

它由一个顶部全宽的柱子组成，柱子下面是3个列宽的区块。blocka all设置为特定宽度并向左浮动。

我正在构建的这篇文章的不同之处在于，它不只是顶部的文章是一篇全宽的特色文章，任何一行都可以显示一篇特色文章，这篇特色文章应该扩展页面的全宽，并向下推其他块。

问题是，如果一篇文章被指定为特色文章，而它不在左栏中，那么它就不会看起来正确。下图说明了如果一篇特色文章出现在第2或第3栏中会发生什么。

通过Wordpress帖子的WHILE循环，我计算并为每个帖子CSS类分配一个介于1到3之间的数字。示例<代码>

col-1=左立柱
col-2=中立柱
col-3=右立柱

有时，一篇文章也会有一个名为的CSS类。当一篇文章被指定为featured时，它将扩展3列的全宽，而不仅仅是1列。

只要特色帖子是结果集中的第一篇帖子，这一切都很容易做到。然而，在下图中，我已经指出了我的问题所在。如果我为每个帖子指定一个1-3的类列名，为特色帖子指定一个特色类列名，那么假设我正在迭代集合，并且我为一个通常类名为col-2或col-3的帖子指定了一个characterizedCSS类，那么就有问题了。

下图显示了这个问题。在第3行，您可以看到如果我将一个特色类分配给第3行中心列（col-2）会发生什么

我需要以某种方式将类名col-1col-2col-3或featured分配给while循环中的所有帖子，并确保featured帖子始终位于第1列位置。

我愿意接受任何关于如何实现这一目标的建议或帮助？

下面是PHP循环的示例代码。。。（注意：我还没有添加代码来检查特色帖子）

<?php
// Start our column count at 1
$column = 1;
while (have_posts()) : the_post();
    $col_class = 'post-col-' .$column;
?>

  <article <?php post_class($col_class); ?>>
      post content
  </article>

<?php
// Increase the Column count
$column++;
// After count has displayed 3, we reset the count
if($column == 4){
    $column = 1;
}
endwhile;
?>




Answer 1

只是认为你也可以持有一个元素，直到整行被填满。如果你有这样的帖子排序：

1. 列表项
2. 列表项
3. 列表项
4. 列表项
5. 功能列表项
6. 列表项
7. 列表项

您可以像检测到某个特色项目一样循环浏览它们，并临时存储它，完成后显示它。如下所示：

<?php
$column = 1;
$featured_list = array();
while (have_posts()) : the_post();
  $col_class = 'post-col-' .$column;

  if(!$isfeatured) {
    echo '<article '.post_class($col_class).'>post content</article>';
  } else {
    $featured_list[] = '<article '.post_class($col_class).'>post content</article>';
  }

  // Increase the Column count
  $column++;
  // After count has displayed 3, we reset the count
  if($column == 4){
    $column = 1;
  // Print everything in the array, doing nothing if empty
  foreach ($featured_list as $featured_item) { 
    echo $featured_item;
  }
  // Reset the array
  $featured_list = array(); 
}
endwhile;
?>