将div均匀地放置在五个垂直列中

Question

我想创建一个由五列组成的动态布局。在每一列中，项目应均匀地放置在垂直面上，从左开始，从右结束。例如，如果总共有8个项目，那么前三列中将有2个项目，最后两列中将有1个项目。

像这样：

_______ _______ _______ _______ _______                       _______
|#######|#######|#######|#######|#######|                     |       |
|#  1  #|#  3  #|#  5  #|#  7  #|#  8  #|                     |       |
|#######|#######|#######|#######|#######|                     |       |
|#######|#######|#######|       |       |                     |       |
|#  2  #|#  4  #|#  6  #|       |       |   #######           |       |
|#######|#######|#######|       |       |   #  x  # == item   |       | == column
|_______|_______|_______|_______|_______|   #######           |_______|

我遇到的问题不是CSS布局，而是循环的实际创建。我已经计算出了每列中必须放置的项目数量，方法是将项目数量除以列数量。

到目前为止的循环如下：

<?php
...
// The Loop
if ($cards->have_posts()) {
$length           = $cards->post_count;
$column_amount    = 5;
$items_per_column = $length / $column_amount;
$items_per_column = round($items_per_column);
$counter          = 0;
if ($items_per_column < 1) {
$items_per_column = 1;
}
echo '<div class="grid columns equal-height border-bottom">';
while ($cards->have_posts()) {
$cards->the_post();
if ($counter % $items_per_column == 0) {
echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
echo '<div class="grid__col grid__col--1-of-5 border-left no-padding">';
}
get_template_part("modules/column-item"); 
if ($counter == $length) {
echo '</div>'; 
}
$counter++;
}
echo '</div>';
}
// Restore original Post Data
wp_reset_postdata();
?>

但这是不起作用的，因为它不是按照查询顺序一个接一个地将项放在div中，而是试图强制每列由两个项组成。这最终打破了整个局面。

有人知道实现这一目标的诀窍吗？

Answer 1

提前计算项目数。然后，当它到达$count - 1时，确保和$count获得它们自己的列。我下面的想法可能会被优化一点，但这只是展示了基本想法，而不是提供一个完整的解决方案。如果你不明白我在说什么，请留言。

$columnCount = count($cards);
$i = 1;
while ($cards->have_posts()) {
$cards->the_post();
if($i == $columnCount || $i == ($columnCount - 1)){
//create single item column
}
else ($counter % $items_per_column == 0) {
echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
echo '<div class="grid__col grid__col--1-of-5 border-left no-padding">';
}
get_template_part("modules/column-item"); 
if ($counter == $length) {
echo '</div>'; 
}
$counter++;
$i++;
}

Answer 2

我实际上遵循了用户Ryan Kozaks的建议，并用CSS解决了这个问题。感觉这是不依赖PHP循环进行布局的最有效方法，至少在这种特殊情况下是这样。

相反，我使用了一种非常标准的方法来循环这些帖子，将它们与类.columns__item一起添加到一个名为.columns的容器中。然后，我利用了CSS中的columns属性，并进行了以下操作：

.columns {
column-count: 5;
}
.column__item {
-webkit-column-break-inside:avoid; 
-moz-column-break-inside:avoid; 
-o-column-break-inside:avoid; 
-ms-column-break-inside:avoid; 
column-break-inside:avoid;
page-break-inside: avoid;
break-inside: avoid;
}

在列项目上同时使用page-break-inside和break-inside，这让我有点过于挑剔。这本质上是为了防止.column__item分解成几个列。通过这种方式，.columns根据列项目的数量获得自适应高度，并根据最高列设置其高度。我可能只需要column-break-inside，但有点不清楚两者之间的区别，所以我同时使用了两者，它似乎有效。