我正在尝试创建一个 wordpress 主题。我想要三个带有帖子摘录的专栏。但问题是它们并不总是具有相同的高度（我不希望它们如此），所以当一行中的帖子太高时，下一行开始时会离得太远。
嗯，我真的可以解释它，所以我创建了这个小提琴来说明我的意思：
//in the fiddle there is html and css making a clear example of what i mean
如您所见，帖子 ID#5 太长，因此帖子 #7 不再位于帖子 #4 之下。
我想要找到一个解决方案，使帖子始终“上升”到该专栏中的上一个帖子。如果可能的话，不用任何插件...
有什么想法吗？
【问题讨论】：
标签： php css wordpress multiple-columns
要创建动态列高，无论是图片/帖子/产品，您都可以申请Masonry JS
这个 JS 让你可以将上面一行中的每个新 div 放在前一个 div 下，并且显示效果很好。
【讨论】：
这是一个基于 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 加载）！ :-)
【讨论】：