如何在X，Y坐标下使用WHILE和/或FOREACH循环创建DIV框？

Question

这里就是我试图完成：

• 位置的每个DIV /盒到适当的X，Y在另一个DIV 帮助协调这里PLZ

我希望每个位置DIV /框到其在“map_size”DIV中的适当坐标。我所有的盒子都被放在一条直线上。提前致谢。我只想使用HTML，PHP和CSS。

我有什么：http://imgur.com/H7jwj2Z

我想要什么（不是地图的所有四个区域，只有一个）：

： http://www.chem.utoronto.ca/coursenotes/analsci/stats/images/2D_Centroid.gif

我的html文件的PHP顶部

<?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()); } ?> 

其他php部分只有DIV：

<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>