Question

我正在尝试创建一个wordpress主题。我希望有三个列的帖子摘录。但问题是它们并不总是具有相同的高度（我不希望它们），所以当一行中的帖子太高时，下一行将开始太远。

嗯，我真的可以解释一下，所以我创造了这个小提琴，以表明我的意思：

//in the fiddle there is html and css making a clear example of what i mean

http://jsfiddle.net/59qyD/1/

正如你所看到的，帖子ID＃5太长了，所以＃7后的帖子不再发布了＃4。

我想要的是找到一个解决方案，其中帖子总是“上升”到该列中的上一篇文章。如果可能，没有任何插件......

有什么想法吗？

Answer 1

要创建动态列高，无论是图像/帖子/产品，都可以应用Masonry JS

这个JS为你提供了在上一行的前一个div下拟合每个新div的可能性，并且具有很好的显示效果。

Answer 2

这是基于PHP + CSS的解决方案：

<强> PHP：

$count = 0;
$count_total = 10; // or use dynamic count: count($all_posts)
$columns = 3;
foreach ( $all_posts as $k=>$v ) {
    $count++;
    $is_first_column = false; // always set to false, then set to true only when the condition matches!
    // Now check is this a post for the first column
    if( $count==1 || ($count-1)%$columns==0 ) { // check if it's 1st and every 4,7,10 post and place it in 'column 1'
        // set additional class for every post that need to be placed in the first column
        $is_first_column = true;
    }

    // Now you can add the additional class to the html markup:
    <article id="post-<?php the_ID(); ?>" class="post col<?php if( !empty( $is_first_column ) ) { echo ' column_1'; } ?>">


}

然后使用CSS清除每个.column_1的浮动。

<强> CSS：

.column_1 {
    clear: both;
}

我在多个项目中使用了类似的方法，但它确实有用。上面的代码可能需要我修改一下才能适合你的特定主题，但我希望你能得到主要的想法。

它会在页面+ CSS加载后立即工作（无需等待JS加载）！： - ）

Wordpress在列中发布

2 个答案: