Разбиение содержимого массивов на разные строки

Question

Я пытаюсь, чтобы каждый элемент массива начинался с новой строки, в то же время позволяя другому контенту находиться в той же строке.

//arrays of plannames
$planname_num=array(1=>"Alpha","Omega","Gamma");

//arrays of planlevels
$planlevels_num=array(1=>"Bronze","Silver","Gold");
/* 
 * 
 * Get The Length of Plan Name Array
 * 
 * 
 */
$planname_array_length=count($planname_num);
/* 
 * 
 * Get The Length of Plan Level Array
 * 
 * 
 */
$planlevel_array_length=count($planlevels_num);

$pnArrayLength=$planname_array_length;
$plArrayLength=$planlevel_array_length;

for ($pn=1; $pn <= $pnArrayLength; $pn++) {//loop to create plan name indicators 
            for ($pl=1; $pl <= $plArrayLength; $pl++) {//loop to create plan level indicators 


             //Create pricing for each plan from db
                $getplansql = "SELECT SUM(`planPrice`) AS planPrice,planDescription FROM `plans`
                        WHERE planName = '$planname_num[$pn]' AND planLevel = '$planlevels_num[$pl]'";
                $resultplans = $conn->query($getplansql);

                while($plan = mysqli_fetch_assoc($resultplans)) {$i++;// output data of each row
                         //calculate sales price
                         $finalpricing = ($plan['planPrice'] * 0.7) + ($plan['planPrice']);

                //create plan card
                $resultplanarray.= '

                        <div class="col-lg-2">
                         <div class="panel price panel-red">
        <div class="panel-heading text-center">
                        <h3>'.$planname_num[$pn].'</h3>
                                                <h3>'.$planlevels_num[$pl].'</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="lead panel-body-pricing" style=""><strong>$'.round($finalpricing).'/month</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>
                                                       '.$plan['planDescription'].'
                                                        </li>
                                                        </ul>
                        <div class="panel-footer">
                        <a class="btn btn-lg btn-block btn-danger" href="#">BUY</a>
                        </div>
                                                </div>
                                                </div>';

}}}


//print result outside of while loop
echo $resultplanarray;

Этот код будет выводиться следующим образом, пока сетка не будет12 заполнено:

Alpha  Alpha   Alpha Omega  Omega   Omega 
Bronze Silver  Gold  Bronze Silver  Gold

Я бы хотел, чтобы массив разбивал и печатал различные группы планов в каждой новой строке, например:

Alpha  Alpha   Alpha 
Bronze Silver  Gold 

Omega  Omega   Omega 
Bronze Silver  Gold 

Как этого достичь?

Answer 1

Вы также можете сделать это с помощью CSS, не добавляя в разметку.

Это работает путем стилизации каждого третьего div с индексом 1 (3n+1), поэтому добавьте clear к div 4, 7,10 и т.д ..

.col-lg-2 {
    display: block;
    float: left;
}

.col-lg-2:nth-child(3n+1) {
    clear: left;
}

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Alpha</h3>
            <h3>Bronze</h3>
        </div>
    </div>
</div>

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Alpha</h3>
            <h3>Silver</h3>
        </div>
    </div>
</div>

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Alpha</h3>
            <h3>Gold</h3>
        </div>
    </div>
</div>

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Omega</h3>
            <h3>Bronze</h3>
        </div>
    </div>
</div>

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Omega</h3>
            <h3>Silver</h3>
        </div>
    </div>
</div>

<div class="col-lg-2">
    <div class="panel price panel-red">
        <div class="panel-heading text-center">
            <h3>Omega</h3>
            <h3>Gold</h3>
        </div>
    </div>
</div>

Answer 2

Добавить внешний контейнер для всех названий планов

$planname_num = array(1=>"Alpha","Omega","Gamma");
$planlevels_num = array(1=>"Bronze","Silver","Gold");
$planname_array_length = count($planname_num);
$planlevel_array_length = count($planlevels_num);

$resultplanarray = '';
for($i = 1; $i <= $planname_array_length ; $i++)
{
    $resultplanarray .= '<div class="row">';
    for($j = 1; $j <= $planlevel_array_length ; $j++)
    {
        //YOUR QUERY DATA
    }
    $resultplanarray .= '</div>';
}

Я добавил <div class='row'>

Пожалуйста, проверьте его и дайте мне знать, если у вас есть какие-либо проблемы