Question

在我的网站上，我使用三列布局显示一些卡片 - 有点像Google+。但是，我正在显示的卡片是动态的，因为我不知道会显示多少张卡片。我不知道如何在三列上均匀分配这些。

这是一个典型的专栏：

<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>

这是我使用的PHP循环 - 它是相当标准的：while($row = mysql_fetch_assoc($result)) { }

其中有三个，理想情况下我希望卡片均匀分布在三列上。

Answer 1

这是在一行中打印每三个记录的示例模式：

<?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
  }
}
?>

在while循环中将数据分为三列

1 个答案: