循環以使輸出居中

Question

• 我想在一頁中顯示所有類別，每行顯示4個項目。
• 如果我有4,8或12個項目，那么我沒問題，但是，如果我有5個項目或任何不能被4整除且沒有任何余數的“項目數”，則在下一行顯示（因為我已將每個項目設置為25帶有CSS的屏幕百分比），其后的間隙空間看起來確實很奇怪而且是空的。 這是一個問題，我將其余的項目稱為indeBox，就像在獨立的盒子中一樣。
• 我的最終目標是將那些獨立的盒子對准中心。
• 我正在嘗試為此目的創建一個算法。

這是我到目前為止所做的

以下函數帶有兩個參數。 numberRestriction是每行允許的項目數（4）childs是具有所有類別的對象。 我正在計算兒童物體中有多少個類別，並找出是否還有剩余物。

function calculateDivision($numberRestriction, $childrens)
{

    $arrayobj = new ArrayObject($childrens);
    $itemLenght = $arrayobj->count();   

    $itemBasket = $itemLenght;
    $remaining = $itemBasket % $numberRestriction;

    return $remaining;
}

在模板上

 <?php 
    //$term = get_queried_object();
        $childrens = get_categories(array('parent'  => 27,'hide_empty' => false)); 
        $rowRestriction =4;
        $indeBox = calculateDivision($rowRestriction, $childrens); 

        $arrayobj = new ArrayObject($childrens);
        $itemLenght = $arrayobj->count();  
        $i = 0;


        if($indeBox == 0)
        {

            foreach($childrens as $index => $children) 
            {  
                $cat_image = z_taxonomy_image_url($children->term_id);
                $cat_id = $children->term_id;
                $desc = @explode('|', $term->description);  


                ?>



                <a  href="<?php echo get_category_link($cat_id) ?>" >
                <div class="food_list_single menus_list" style="background: url(<?php echo $cat_image ?>) no-repeat scroll right center / cover ">
                    <div class="food_hover menus_hover ">
                        <p style="width: 100%; overflow: hidden; padding: 10px; text-align: center;" class="food_hover_title_small"><?php echo $desc[2] ?></p>
                        <p class="food_hover_title"><?php echo $children->name ?></p>
                        <button class="btn btn-default food_button"><i class="fa fa-eye"></i>View Details</button>
                    </div>

                </div>
                </a>



                <?php 
            } //foreach ends
        }else
        {

            //loop all items 
            //set a counter
            //everytime the counter reaches maximum item allowed in a row, counter should reset and add class to row even
            //once it finds odd number in a row it should call the row uneven
            $counter1 = 0;
            foreach($childrens as $index => $children) 
            {
                $counter1++;

                $cat_image = z_taxonomy_image_url($children->term_id);
                $cat_id = $children->term_id;
                $desc = @explode('|', $term->description);  

                    //out put div
                    ?>
                        <a  href="<?php echo get_category_link($cat_id) ?>" >
                        <div class="food_list_single menus_list" style="background: url(<?php echo $cat_image ?>) no-repeat scroll right center / cover ">
                            <div class="food_hover menus_hover ">
                                <p style="width: 100%; overflow: hidden; padding: 10px; text-align: center;" class="food_hover_title_small"><?php echo $desc[2] ?></p>
                                <p class="food_hover_title"><?php echo $children->name ?></p>
                                <button class="btn btn-default food_button"><i class="fa fa-eye"></i>View Details</button>
                            </div>

                        </div>
                        </a>


                    <?php
                    //also track the last items index
                    $last_items_index = $index;



            ?>




            <?php

            }
            echo "Inde items :".$indeBox; //finds how many indeboxes
            echo " Last items index " . $last_items_index ; 



        }


        ?>

圖片

Answer 1

解決方案：效果不佳或效率高，但有效

1. 找出數組中有多少項附加到變量。
2. 找出連續容納多少個盒子並附加到變量。
3. 使用以下函數計算獨立的框：

。

function calculateDivision($numberRestriction, $childrens)
{

    $arrayobj = new ArrayObject($childrens);
    $itemLenght = $arrayobj->count();   

    $itemBasket = $itemLenght;
    $remaining = $itemBasket % $numberRestriction;

    return $remaining;
}

由於我已經知道連續有4個盒子，所以只能有1,2或3個獨立的盒子。 如果有4個盒子，那么就沒有獨立的盒子。 我可以跑步

if($indeBox == 1)
{
 //if there are one independent box remaining 
 //find the last item of the array and put a bootstrap class col-md-offset-3 to 

 //if not last item, no need for adding additional class 

}
else if($indeBox == 2)
{
 //if there are two independent boxes remaining 
 //find the second last item of the array and put a bootstrap class col-md-offset-3 to 

 //if not last item, no need for adding additional class 
}
else if($indeBox == 3)
{
 //if there are three independent box remaining 
 //find the third last item of the array and put a bootstrap class col-md-offset-3 to 

 //if not last item, no need for adding additional class 
}