Question

这是我正在努力实现的目标：

将每个div / box定位到另一个DIV中的相应X，Y坐标 HELP HERE PLZ

我希望将每个DIV / box放在“map_size”DIV中的适当坐标上。我的所有盒子都是直线放在一起。提前致谢。我只想使用HTML，PHP和CSS。

我想要什么（不是地图的所有四个区域，只有一个）：http://www.chem.utoronto.ca/coursenotes/analsci/stats/images/2D_Centroid.gif

我的php顶部的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()); 
}
?>

只有DIV的其他php部分：

<div id="map_size" align="center">
<?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' style='style:absolute;
                                    left: " . $x_pos. " px;
                                    top:  " . $y_pos. " px;'>box number</div>";
    } //end while coord_result loop

?>

    </div> <!-- end div map_Size -->

我的css文件：

 body{
margin:0px auto;
width:80%;
height:80%;
}


#map_size{
width:800px;
height:800px;
background:#0099FF;
border-style: solid;
border-color: black;
}

#desk_box{ 
width: 20px;
height: 30px;
border:5px solid black; 
margin: 10px;
}

Answer 1

不是100％明确你想要什么，但这是你在寻找什么？：

<?php

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

    foreach($coord_result as $row){
    echo"<div id='desk_box' style='top:".$desk[0]."; left:".$desk[1]."';">box number #number written here</div>";
        }
    //draw a box with a DIV at its X,Y coord     
        } //end while coord_result loop

?>

和CSS一起使用它：

#map_size{
width:800px;
height:800px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}


#desk_box{ 
width: 20px;
height: 30px;
border:5px solid black; 
margin: 10px;
position: absolute;
}

Answer 2

怎么样：

<div id="map_size" align="center">
<?php
//get number of rows for X,Y coords in the table
  while($row = mysqli_fetch_assoc($coord_result)){    
    //naming X,Y values
    $desk[] = array('x' => $row['x_coord'],'y' => $row['y_coord']);
    foreach($coord_result as $row){
      echo '<div style="postion:absolute;left:'. $row['x_coord'] . 'px; top:'. $row['y_coord']'.;" id=desk_box>box number #number written here</div>';
    }
    //draw a box with a DIV at its X,Y coord     
  } //end while coord_result loop

?>

</div>

如何在PHP，Y坐标处创建带有WHILE和/或FOREACH循环的DIV框？

2 个答案: