创建一个动态的类似表格的网格,而不使用表格


Create a dynamic table-like grid without using 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']

我不喜欢用桌子。我知道如何使用浮动和清除属性来排列div,但如果它们都是在while语句中创建的,这让我认为这可能是不可能的。

所以我猜,这是可能的不使用表,或者我应该坚持吗?

这可以按照您要求的方式完成,尽管这不是最好的方法。在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>";
}

然后使用你的CSS浮动和清除必要的left, middle, right类。

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

然而,

考虑到所有这些,我仍然可能不会打扰<div> s。从语义上讲,如果这是一个产品列表,您应该在<li>标签中列出它们。然后将<li>样式设置为float: left;,每个样式设置为容器宽度的33%,这样每行3个