如何从选定的帖子创建三个栏目

时间：2013-08-25 作者：Krystian

我想创建一个包含3个选定帖子的三列。它们必须包括图像和标题。像这样http://i.imgur.com/tXg0bv3.png如何在CSS和HTML中创建它？这对我来说很重要，我找不到这样的东西。谢谢

对不起，我没有提到。此列必须位于循环外部。这是循环外post的代码：

<?php
$recent = new WP_Query();
$recent->query(\'showposts=1\');
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
?>
<div class="post_image_th">
<?php the_post_thumbnail(\'mainImageCropped\'); ?>
</div>
<div class="post_content_spot">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<ul>
<li class="user"><?php echo get_avatar( get_the_author_meta( \'ID\' ), 32 ); ?><?php the_author_posts_link(); ?></li>
<li class="comments"><?php comments_popup_link(\'0 comments &#187;\', \'1 comment &#187;\', \'% comments &#187;\'); ?></li>
</ul>
<?php endwhile ?>
<?php else : ?>
<p> Nothing find </p>
<?php endif ?>

2 个回复
SO网友:JMau

你可以这样做：

<?php
$i = 0;
$args   = array(\'posts_per_page\' => 3);
$recent = new WP_Query($args);
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
$i++;
?>

<div class="post-in-column">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_excerpt(); ?>
</div>

<?php echo ($i % 3 == 0) ? \'<div class="clear"></div>\' : \'\'; ?>
没有消息。然后是一点CSS：

.clear {clear:both;}
.post-in-column {float:left; width: 33%/* maybe you\'ll need to set fixed width */; }
我还没有测试过，但应该可以。

SO网友:Dipesh KC

您可能没有预料到这类解决方案，但值得知道的是，对于这类问题也有一个前端解决方案。

css3规范有一个新特性，称为column-count, 它将自动在多个列中呈现文本

下面是一个简单的示例w3schools

div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
这里是another

我知道这只适用于现代浏览器，但人们已经开始使用它了！

好消息是，已经有一个用于此的回退jquery插件，名为Columnizer

结束
标签： posts   columns   小码农  

相关推荐

Pre_Get_Posts筛选器中有多个元值？

我有一个带有自定义字段的自定义帖子类型，特别是“zip”。我还有一个数组，可以存储20个不同的邮政编码。我想检查一下这些自定义邮件类型中是否有邮政编码。如果他们这样做了，那么我希望他们出现在搜索结果中。如果他们没有，我不想让他们出现。我该怎么做。。？这快把我逼疯了。提前谢谢。