php - 3 列布局，带有从 mysql 获取数组构建的 div

Question

我有一个返回动态记录数的查询

$query = "SELECT * FROM repository";
$result = mysql_query($query) or die(mysql_error());

我想在 3 列中显示结果，即

div 1 | div 2 | div 3
div 4 | div 5 | div 6
div 5 | div 6 | div 7
div 8 | div 9 | 

现在你可以看到它不会总是返回偶数列，这是我有点迷茫的地方。理想情况下，我想将 div 1、4、5 和 8 div 类称为左侧，div 2、5、6 和 9 div 类 = 中间，将 3,6 和 7 div 类称为右侧，这样我可以更好地控制样式，但我想只让他们都在一个类(class)也很好。

所以我想看到的 div 布局是这样的:

<div class="left">
   <div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

<div class="middle">  
   <div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

<div class="right">
<div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

我想最好的方法是让输出如上并显示它 3，然后使用 css float 左、右和中心 div。正如您在上面看到的，我在每个单元格中显示游戏信息，单元格中的每个 div 将显示为一行。所以它会是这样的:

------------------|------------------|------------------|
- heres my image -|- heres my image -|- heres my image -| 
- heres my image -|- heres my image -|- heres my image -|
- heres my image -|- heres my image -|- heres my image -|
- heres my image -|- heres my image -|- heres my image -|
------------------|------------------|------------------|
- street fighter -|- street fighter -|- street fighter -|
------------------|------------------|------------------|
- my_username    -|- my_username    -|- my_username    -|
------------------|------------------|------------------|
- 4.5 - 10.5k    -|- 4.5 - 10.5k    -|- 4.5 - 10.5k    -|
------------------|------------------|------------------|
- more details   -|- more details   -|- more details   -|
------------------|------------------|------------------|

所以我知道我需要做一些类似下面的 while 循环的事情并开始构建 div，如果我知道例如它的 3 个 div 就很简单但是如果它说 5 个结果怎么办:

while ($row = mysql_fetch_array($result)){

}

但我真的忘记了如何使用 css 以及我将如何处理我可能会得到随机数结果的事实。我知道这可能是 ABC 的东西，但我花了很长时间谷歌搜索，我可能使用了错误的术语，因为我可以找到很多类似的东西，但没有任何东西能涵盖这种确切的情况。任何想法，一个粗略的例子应该足以让我上路？

Answer 1

我明白了，也许我应该处理最后一行少于 3 的情况，但这似乎工作正常:

                    <?php

                    $query = "SELECT * FROM repository";
                    $result = mysql_query($query) or die(mysql_error());

        $item_num = 0;
        // total number of records
        $num_records = mysql_num_rows($result);
        // loop through the huds
        while ($row = mysql_fetch_array($result)){

            // The first, second and 3rd column have a different class name so i can
            // have more control over the formatting in css

            // If its the first column of 3 write the div left_column class to enter the hud details 
            if ($item_num % 3 == 0){?>
                <div class="left_column"> <?php }
            // If its the second column of 3 write the div middle_column class 
            else if ($item_num % 3 == 1){?>
                <div class="middle_column"> <?php }
            // If its the second column of 3 write the div right_column class 
            else if ($item_num % 3 == 2){?>
                <div class="right_column"> <?php } ?>
                    <div class="image">
                    <?php echo $row['image']; ?>
                    </div>
                    <div class="name">
                    <?php echo $row['name']; ?>
                    </div>
                    <div class="user">
                    <?php echo $row['user']; ?>
                    </div>
                    <div class="rating_and_download">
                    <?php echo $row['rating'] . " - " .  $row['downloads']?>
                    </div>
                    <div class="more_details">
                    <a href="details.php?id=2">More Details</a>
                    </div>
                </div> <?php
                $item_num ++;
            }
        ?>

然后我用了这个css

.left_column
{
float:left;
width: 30%;
padding: 10px;  
}

.middle_column
{
float:left;
width: 30%;
padding: 10px;          
}

.right_column
{
float:right;
width: 30%;
padding: 10px;
}