在不使用表的情况下创建类似于动态表的网格

时间:2011-09-19 23:36:13

标签: php css-tables

我想知道是否可以使用使用PHP动态创建的div来创建类似网格的布局。

我正在创建一个产品页面,它将显示PHP数据库中的所有产品。我希望每个产品都装在一个div中,并且需要3个div来连续显示所有产品所需的行数。

这样的事情:

div              div              div
$row['product1'] $row['product2'] $row['product3']

div              div              div
$row['product4'] $row['product5'] $row['product6']

我不想使用表格。我知道如何使用float和clear属性对div进行排序,但是如果它们都是在while语句中创建的话,那就不行了,这让我觉得它可能是不可能的。

所以我想,这可能不使用表格,或者我应该坚持下去?

1 个答案:

答案 0 :(得分:1)

这可以按照你提出的方式来完成,尽管这不是最好的方式。完全有可能在while循环中识别列中的<div>位置:

// Looping over your results simplified...
$i = 1;
while ($results) {
   if ($i % 3 == 1) {
      $div_class = 'left';
   }  
   else if ($i % 3 == 2) {
      $div_class = 'middle';
   }
   else {
      $div_class = 'right';
   }
   $i++;

   // output, simplified
   echo "<div class='$div_class'>$row_contents</div>";
}

然后根据left, middle, right类的需要使用CSS浮动和清除。

.left, .middle, .right {
   float: left;
}
.left { clear: left; }
.right { clear: right; }

然而,

鉴于所有这些,我仍然可能不会打扰<div>。在语义上,如果这是产品列表,您应该将它们列在<li>标记中。然后只需将<li>设置为float: left;,并将每个设置为容器宽度的33%,这样每行就可以获得3个。