根据DB值更改位置

Question

我让人们填写表格，插入距离等。它们存储在数据库中。

然后我引导他们到一个页面，在那里我显示了车轴的数量（在这种情况下为12）并制作了一个圆圈（在css中） 然后它看起来像这样：

此代码：

<?php
        $show_axle = $database->axles($_GET['train_id']);
 ?>

    <div id="axle_bogie_border">
        <div id="axle_position">
            <?php      
                foreach($show_axle as $axlefigure){ ?>
                <div id='number_of_axles'> <?php echo $axlefigure['axle'] ?></div>
            <?php
                } 
            ?>
        </div>
    </div>

axle_border制作火车图像（黑色矩形）

axle_position注意车轴（实际上是数字）不要进入图像但略低于它（所以它看起来像轮子/车轴）。

Number_of_axles使数字看起来像一个圆圈（像轮子/轮轴一样）。

现在功能：

function axles($id){
        $sql = "SELECT * FROM axle WHERE train_id = :id2";
        $sth = $this->pdo->prepare($sql);
        $sth->bindParam(":id2", $id, PDO::PARAM_STR);
        $sth->execute();
        return $sth->fetchAll();
    }

该功能从表axle中选择所有内容（参见第一张图片）。

现在，我实际上希望车轴占据一席之地。我正在考虑通过Distance行来做这件事。

所以：

轴1的距离为5。所以从最左边开始是5px 轴2的数字为10.所以我希望它在轴1旁边10个像素。 轴3的编号为5.所以我希望它在轴2旁边有5个像素。 等

最终需要看起来像这样：

我的问题：这是否可行。如果是，怎么样？

编辑：

现在正在工作:) 我做了以下事情：

<?php
        $show_axle = $database->axles($_GET['train_id']);
?>
    <div id="axle_bogie_border">
        <div id="axle_position2">
            <?php      
                foreach($show_axle as $axlefigure){ ?>
                    <div style="margin-left:<?php echo $axlefigure['distance'];?>px;"> 
                        <?php echo $axlefigure['axle'] ?>
                    </div>
            <?php
                } 
            ?>
        </div>
    </div>

和css：

#axle_position2 {
    margin-top: 9%;
    position: relative;
    float: left;
}



#axle_position2 div {
    background: green;
    float: left;
    position: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50px;
}