循环使输出居中

Question

• 我想在一个页面中显示所有类别，每行4个项目。
• 如果我有4,8或12个项目，那么我没有问题，但是如果我有5个项目或任何“数量的项目”不能被4整除而没有任何余数出现在下一行（正如我设置的那样）每个项目25％的屏幕与css）随后的空隙空间，看起来很奇怪和空。这是一个问题，我将那些剩余项目 indeBox 称为独立框。
• 我的最终目标是将这些独立的盒子对齐在中心。
• 我正在尝试为此目的创建算法。

这是我到目前为止所做的事情

 以下函数有两个参数。   numberRestriction是每行允许的项数（4）   儿童是所有类别的对象。   我在计算儿童对象中存在多少个类别   并查明是否有遗留物。

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. 使用以下功能计算独立的框：

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 
}

因为我已经知道连续4个盒子，所以只能有1,2或3个独立的盒子。如果有4个盒子，则没有独立的盒子。我可以运行条件

var newString = Regex.Replace("A     B      C",@"\s+"," ")