Divide data into three columns in while loop

Question

On my website I'm using a three column layout to display some cards - a bit like Google+. However, the cards I'm displaying are dynamic as in I don't know how many will be displayed. I don't know how I can divide these over the three columns evenly.

This is a typical column:

<div class="col-md-4 col-sm-6">

    <div class="panel panel-default">
        <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>A Title here.</h4></div>
        <div class="panel-body">
            <p><img src="//placehold.it/150x150" class="img-circle pull-right"> <a href="#">A description here.</a></p>
            <div class="clearfix"></div>
            <hr>
            Some text here.
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>A Title here.</h4></div>
        <div class="panel-body">
            <p><img src="//placehold.it/150x150" class="img-circle pull-right"> <a href="#">A Description here.</a></p>
            <div class="clearfix"></div>
            <hr>
            Some text here.
        </div>
    </div>

</div>

This is the PHP loop I use - it's fairly standard: while($row = mysql_fetch_assoc($result)) { }

There are three of these and ideally I want the cards to be evenly distributed over the three columns.

There are 3 <div class="col-md-4 col-sm-6"> next to each other. And I want to distribute the <div class="panel panel-default"> over these. — user3821544
– user3821544, Commented Jul 27, 2014 at 20:02

Jason OOO · Accepted Answer · 2014-07-27 19:41:36Z

2

This is the example pattern for printing every three records in one row:

<?php 
$i = 0;
$column = 3;
while(...){
  if($i % $column == 0){
   //1- print start tag of wrapper
  }
  //2- print columns
  $i++;
  if($i % $column == 0){
   //3- print end tag of wrapper
  }
}
?>

answered Jul 27, 2014 at 19:41

Jason OOO

3,5622 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3821544 Over a year ago

Well, this is over three rows. What I want is three columns.

DeathGrip Over a year ago

He's right it is 3 columns inside one row, but it puts the first 3 cards in the first column then closes it so there will ever only be 3 in there. The best way would be to drop first card in the first column, then the second in the second column, then the third in the third column, THEN go back to the first column and put the forth card in there too etc. But I'm not sure how to achieve this.

Collectives™ on Stack Overflow

Divide data into three columns in while loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related