Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/282.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在PHP中使用while循环创建DIV框?_Php_Html_Css_Mysqli - Fatal编程技术网

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

如何在PHP中使用while循环创建DIV框?,php,html,css,mysqli,Php,Html,Css,Mysqli,我试图通过从MySQL读取DIV框的X,Y坐标来创建一个DIV框。我在同一个文件上使用PHP和HTML。我也包括了我的CSS(我将在以后制作一个单独的CSS文件) 现在我得到了一些结果,但只有一个盒子在另一个盒子下面。我在做笛卡尔地图,必须把每个盒子放在适当的位置我想避免使用Javascript和Canvas,只使用纯css、html和php我之所以使用div,是因为有一个特定的原因,可以在它们之后添加信息。下面是我的代码,提前感谢您的帮助 我拥有的文件顶部: <!DOCTYPE html

我试图通过从MySQL读取DIV框的X,Y坐标来创建一个DIV框。我在同一个文件上使用PHP和HTML。我也包括了我的CSS(我将在以后制作一个单独的CSS文件)

现在我得到了一些结果,但只有一个盒子在另一个盒子下面。我在做笛卡尔地图,必须把每个盒子放在适当的位置我想避免使用Javascript和Canvas,只使用纯css、html和php我之所以使用div,是因为有一个特定的原因,可以在它们之后添加信息。下面是我的代码,提前感谢您的帮助

我拥有的文件顶部:

<!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()); 
}
?>
<style type="text/css">
    #desk_box{ width: 20px; height: 30px; border:10px solid black; margin: 10px;}   
</style>
<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 -->

我头上的CSS:

<!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()); 
}
?>
<style type="text/css">
    #desk_box{ width: 20px; height: 30px; border:10px solid black; margin: 10px;}   
</style>
<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 -->

#书桌盒{宽度:20px;高度:30px;边框:10px纯黑色;边距:10px;}
我试图在这里循环,对于存在的每一行,在其适当的位置创建一个div:

<!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()); 
}
?>
<style type="text/css">
    #desk_box{ width: 20px; height: 30px; border:10px solid black; margin: 10px;}   
</style>
<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 -->

A节


不,您实际在哪里为DIV分配坐标

像这样:

//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
//获取表中X,Y坐标的行数
而($row=mysqli_fetch_assoc($coord_result)){
//命名X,Y值
$x_pos=$row['x_coord'];
$y_pos=$row['y_coord'];
//在X,Y坐标处绘制一个带DIV的长方体
回声“
“此处方框”;
}//在协调结果循环时结束

此代码获取每个X/Y坐标,并使用在每个循环中生成的坐标从父DIV的左/上角绝对定位DIV。

看起来您需要为每个DIV输出一个
style
属性,以使用CSS定义其定位。我这样做了,它们转到左上角,我希望它们位于其X上,那么我真的不知道你要什么。这段代码将为数据库中的每一组X/Y坐标生成一个div,并将根据页面左/上角数据库中的X/Y坐标对它们进行定位。如果问题是您需要从不同的角度使用它们,那么您只需要更新CSS,使它们从右侧或底部或任何您需要的位置偏移。否则,您应该通过转储SQL结果来检查数据,以确保您的数据库与页面上的预期匹配。问题可能是“section_a”(假设它在css中具有某种样式)的问题。对于绝对位于另一个div中的div,可能会发生有趣的事情,取决于父div的设置。如果您使用某种框架将其他样式应用于元素,则更是如此。很好,我更新了我的答案以指示与父div的关系。我去掉了“section_a”div,但问题仍然存在。。为了让您知道,我的表中有6行,第一行位于(20,20),最后一行位于(150150),但仍不在屏幕上的相应位置