如何在PHP中使用while循环创建DIV框？

Question

I am trying to create a DIV box by reading its X,Y coordinates from MySQL. 我试图通过从MySQL读取其X，Y坐标来创建DIV框。 I am using PHP and HTML on the same file. 我在同一文件上使用PHP和HTML。 I have included my CSS as well (I will make a separate CSS file afterwards). 我也包括了我的CSS（之后我将创建一个单独的CSS文件）。

Right now I am getting results but only boxes one under the other. 目前，我正在获得结果，但是只在一个框下面一个框。 I am doing a cartesian map and have to place each BOX on their appropriate position. 我正在做笛卡尔地图，必须将每个BOX放在适当的位置。 I want to avoid using Javascript and Canvas, just pure css,html and php I am using DIVs for a specific reason to put information in them after. 我想避免使用Javascript和Canvas，仅使用纯CSS，html和php，出于特定原因，我将DIV用于在其后放入信息。 Below is my code, thanks in advance for the help! 下面是我的代码，在此先感谢您的帮助！

Top of the file I have: 我拥有的文件顶部：

<!DOCTYPE html>
<?php
include 'db_conn.php';

//query to get X,Y coordinates from DB
$coord_sql = "SELECT x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);

//see if query is good
if($coord_result === false) {
    die(mysqli_error()); 
}
?>

My CSS in the head: 我的CSS在头：

<style type="text/css">
    #desk_box{ width: 20px; height: 30px; border:10px solid black; margin: 10px;}   
</style>

I am trying to loop through here, for each row that exists create a div at its appropriate location: 我正在尝试遍历这里，为存在的每一行在其适当的位置创建一个div：

<div class="section_a" >
  <p>Section A</p>
  <?php

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
  //naming X,Y values
    $x_pos = $row['x_coord'];
          $y_pos = $row['y_coord'];     

    //draw a box with a DIV at its X,Y coord    
    echo "<div id='desk_box'>box here</div>";                                           
    } //end while coord_result loop
?>

</div> <!-- end div section_a -->

Answer 1

No where are you actually assigning the coordinates to the DIV. 不，您实际在哪里将坐标分配给DIV。

Like so: 像这样：

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
    //naming X,Y values
    $x_pos = $row['x_coord'];
    $y_pos = $row['y_coord'];     

    //draw a box with a DIV at its X,Y coord    
    echo "<div id='desk_box' style='position: absolute;
                                        left: " . $x_pos . "px;
                                         top: " . $y_pos . "px;'>
           box here</div>";                                           
} //end while coord_result loop

This code is taking each X/Y coordinate and absolutely positioning the DIV from the left/top corner of the parent DIV, with the coordinates you generate in each loop. 该代码将获取每个X / Y坐标，并将DIV从父DIV的左/上角绝对定位，并在每个循环中生成坐标。

如何在PHP中使用while循环创建DIV框？

问题描述

1 个解决方案

解决方案1
1 2014-10-01 17:14:41

如何在PHP中使用while循环创建DIV框？

问题描述

1 个解决方案

解决方案1 1 2014-10-01 17:14:41

解决方案1
1 2014-10-01 17:14:41