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

Php 在不使用表格的情况下创建类似于表格的动态表格,php,css-tables,Php,Css Tables,我想知道是否有可能使用使用PHP动态创建的div创建一个类似网格的布局 我正在创建一个产品页面,该页面将显示PHP数据库中的所有产品。我希望每个产品都放在一个div中,3个div显示在一行中,根据需要显示尽可能多的行,以浏览所有产品 大概是这样的: div div div $row['product1'] $row['product2'] $row['product3'] div div d

我想知道是否有可能使用使用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语句中创建的,我就不知道了,这让我觉得这是不可能的


所以我想,这是不使用表格就可以做到的,还是我应该坚持下去

这可以按你要求的方式来做,尽管这不是最好的方式。完全可以在while循环中识别列中的
位置:

// 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>";
}

然而,
考虑到所有这些,我仍然可能不会为
s而烦恼。从语义上讲,如果这是一个产品列表,那么应该在
  • 标记中列出它们。然后只需将
  • 样式设置为
    float:left并使每一行的宽度为容器宽度的33%,这样每行可以得到3个。

    这可以按照您要求的方式完成,尽管这不是最好的方式。完全可以在while循环中识别列中的
    位置:

    // 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>";
    }
    

    然而,
    考虑到所有这些,我仍然可能不会为
    s而烦恼。从语义上讲,如果这是一个产品列表,那么应该在
  • 标记中列出它们。然后只需将
  • 样式设置为
    float:left并使每一行的宽度为容器宽度的33%,这样每行可以得到3个。

    while语句有什么问题?(除了应该使用foreach而不是while之外)还有,为什么不使用表来表示表格数据呢?就像我说的,我知道如何使用表来表示,但我不想这样。实际上,这听起来不像表格数据。这听起来像是一个无序的产品列表,while语句有什么问题?(除了应该使用foreach而不是while之外)还有,为什么不使用表来表示表格数据呢?就像我说的,我知道如何使用表来表示,但我不想这样。实际上,这听起来不像表格数据。这听起来像是一个无序的产品列表,这正是我想要的答案。当然,一旦我看到它,就非常简单了。谢谢。@sundanlion我建议使用
    并按照我添加的
  • 设置样式,而不是使用
    。您可以在
  • 标记中放置多个文本,对吗?是的,您可以在列表元素中放置多个文本这正是我所寻找的答案。当然,一旦我看到它,就非常简单了。谢谢。@sundanlion我建议使用
    并按照我添加的
  • 设置样式,而不是使用
    。您可以在
  • 标记中放置多个文本,对吗?是的,您可以在列表元素中放置多个文本