代码之家 › 专栏 › 技术社区 › tobiasg

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

wordpress html php

tobiasg · 技术社区 · 6 年前

我想创建一个由五列组成的动态布局。在每一列中,项目应均匀地垂直放置,从左开始,到右结束。例如,如果总共有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();
?>

有人知道实现这一目标的妙招吗?

2 回复 | 直到 6 年前

Difster 6 年前

提前计算项目数。然后,当它到达 $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++;

        }

tobiasg 6 年前

相反,我使用了一种相当标准的方式来遍历这些帖子,并将它们与类一起添加 .columns__item 到一个叫 .columns . 然后我利用了 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 从分裂成几列。这边是根据列项目的数量获取自适应高度,并根据最高的列设置高度。我可能只是需要 column-break-inside