php - 在foreach中按百分比定位

Question

我现在有一个看起来像这样的页面:

代码是:

<?php
   $count_axle = $database->count_axles($_GET['train_id']);     
   foreach($count_axle as $counting){ 
}?>
    <div id="axle_bogie_border">
        <img id="count_train_image" src="Images/add_train1.png" alt="Train look" style="width:<?php echo $counting['totaldistance']; ?>%">
        <?php
                $show_axle = $database->axles($_GET['train_id']);
        ?>


        <div id="axle_position_count">
            <?php      
                foreach($show_axle as $axlefigure){ ?>
                    <div id="count_axle_figure" style="margin-left:<?php echo $counting['totaldistance']; ?>%"> 
                        <?php echo $axlefigure['axle'] ?>
                    </div>
            <?php
                } 
            ?><br /><br /><br />    
        </div>
    </div>

还有CSS:

#axle_bogie_border {
    border: 2px solid black;
    width: 100%;
    height: auto;
    overflow-x: scroll;
    white-space: nowrap;
}

#count_train_image{
    margin-left: 10%;
    margin-right: 10%;
    height: 100px;
    display: inline-block;
    position: relative;
    float: left;
}


#show_length{
    border-bottom: 2px solid black;
    width: 100%;
}

#show_length2{
    border-bottom: 2px solid black;
    width: 10%;
}



#axle_position_count {
    margin-top: 10%;
    margin-left: 10%;
}

#count_axle_figure {
    background: black;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    float: left;
}

没错。所以我根据数据库的总和来制作图像的宽度。例如。您看到的每个圆圈(在本例中为 4 个)都有一段距离。苏:

• 轴 1 = 2000
• 轴 2= 8000
• 轴 3= 2000
• 轴 4= 8000

总共是 20.000mm 20.000mm=20 米。所以这列火车是20米。现在我将其缩小到百分比:(参见图像宽度)

function count_axles($id) {
        $sql = "SELECT (sum(distance))/(25000)*(100) as totaldistance from axle WHERE train_id = :train_id";
        $sth = $this->pdo->prepare($sql);
        $sth->bindParam(":train_id", $id, PDO::PARAM_STR);
        $sth->execute();
        return $sth->fetchAll();
    }

在这里我告诉 100% 是 25.000 毫米(25 米)。 现在我还需要这个用于轴位置。
所以轴 1 = 例如总数的 10%。所以我需要它在左边(边距)10%
轴 2= 5%。所以我需要左边的轴 1+ 5% = 15%。 等等

每个车轴都有自己的 ID(这里是 DB 图片)

所以最终我希望最终结果需要看起来像一列小火车。 (所以前 2 个轴在左，后 2 个轴在右)在火车图像下。 像这样:

Answer 1

我不知道为什么这么多人赞成这个问题。

对我来说，这似乎很不清楚。我听不懂问题是什么？

我想唯一的问题是如何为车轴生成动态余量。

但即使是这个问题也没有明确提出，也没有很好地描述预期结果。

所以这是我的猜测:

shift = -25; //my circle is 50px width 
             //so for the 1st axel if distance=0 
             //circle must be shifted to the left by -25px
viewWidth = 800;

axles = [{distance: 2000}, 
         {distance: 8000}, 
         {distance: 2000}, 
         {distance: 8000}];
trainWidth = 0;
axles.forEach(function (axle) {
  trainWidth += axle.distance;
});

width = Math.round(800*trainWidth/25000);

$('#train h2').text(""+(Math.round(trainWidth/10)/100)+"m");

unusedLeft = Math.round((viewWidth - width)/2);
unusedRight = unusedLeft;
$('#info .leftBox').width(""+unusedLeft+"px" );

unusedMeters = Math.round((25000-trainWidth)/10/2)/100;
$('#info .leftBox h3').text(""+unusedMeters+"m");
$('#info .rightBox h3').text(""+unusedMeters+"m");

$('#info .rightBox').width(""+unusedRight+"px" );

$('#train').width(""+width+"px" );

$('#axels').width(""+width+"px" );



idx = 0;
d = 0;
div = '';

axles.forEach(function (axle) {
  idx++;
  d += axle.distance;
  axle.idx = idx;
  margin = shift + Math.round(d*width/trainWidth);
  axle.margin = margin;
  div += '<div id="axel'+idx+'" style="margin-left: '+margin+'px ;" class="axel circle"></div>';
  
});

$('#axles').append(div);//.marginLeft(""+margin+"px");

h2, h3 {
  text-align:center;
  margin:2px auto;
}

.container {
  width:800px; 
  height:400px;
  border: solid 1px red;
}

#info {
  width:800px; 
  height:20px;
  border: none;
  position:relative;
}

#info .leftBox {
  left:0;
  top:0; 
  height:20px;
  width:75px;
  border-bottom: 1px solid blue;
  position:absolute;
}
#info .rightBox {
  right:0;
  top:0;
  height:20px;
  width:75px;
  border-bottom: 1px solid blue;
  position:absolute;
}
#train {
  margin:3px auto;
  width:650px;
  height:200px;
  background:black;
  vertical-align:middle;
  color:#FFFFFF;
}
#train h2{
  margin:auto auto;
  line-height:200px;
  color:#FFFFFF;
}

#axles {
  width:650px; 
  height:50px;
  margin: 1px auto;
  border: none;
  position:relative;
}

.axel {
	position: absolute;
  float:left;
}
.circle {
	width: 50px; height: 50px;
	border-radius: 50%;
	background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <h2>25m</h2>
  <hr />
  <div id="info">
    <div class="leftBox"><h3>2.5m</h3></div>
    <div class="rightBox"><h3>2.5m</h3></div>
  </div>
  <div id="train">
    <h2>20m</h2>
  </div>
  <div id="axles">
    

  </div>

目前只用JS完成，只是为了阐明如何设置元素的动态边距和宽度。

所以你可以通过更改 axles 的值来玩这个片段，比如:

axles = [{distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}];

http://codepen.io/anon/pen/QbwRMJ