我正在尝试在WordPress中制作一个在线杂志。每个帖子都显示在不同的列中。第一列中的第一个是最新发布的,第二列,第二列,第三列,第三列,依此类推。最好的方法是怎样做的?我想要防止帖子之间的任何差距,所以他们完美地相互跟随,看起来很不错。我已经尝试了-moz-column的东西,它工作正常,但帖子没有按日期排序,只是CSS发现它适合显示帖子。有没有办法可以做到这一点?
You can se live preview of my blog here.
到目前为止: CSS
#wrapper #columns {
}
#wrapper #columns .col {
width: 360px;
background: red;
}
PHP:
<div id="columns" class="clearfix">
<?php
query_posts('posts_per_page=9' . '&orderby=date');
while ( have_posts() ) : the_post();
?>
<div class="col">
<div class="reader-look">
<a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<div class="clearfix"><tag>Blogger Outfit For dagen</tag></div>
</a>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
</div>
答案 0 :(得分:1)
将float: left;
添加到#wrapper #columns .col
并添加此规则:
.col:nth-child(3n+1) {
clear: left;
}