在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.000mm（25 米）。现在我还需要这个用于车轴位置。
所以轴 1 = 例如总数的 10%。所以我需要它在左边 10%（边距）
轴 2= 5%。所以我需要左边的轴 1+ 5% = 15%。等等

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

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

Answer 1

恕我直言，OOP 是为此类功能创建的。我会给你一个小例子，我将如何构建它。该示例仅向您提供了如何操作的提示，但这些基础知识已经是构建它的一种非常灵活的方法。我没有测试它，但我知道这个原理是有效的，这就是这个例子的目的。

/*
    A wheel pattern is an ordering of a group of wheels and the required CSSclasses for each or all wheels.
*/
interface iWheelGroup{
    public function getPattern();
}


class BasePattern implements iWheelGroup{
    protected $pattern;

    public function __construct($pPattern){
        $this->pattern = $pPattern;
    }


    public function getPattern(){
        return $this->pattern;
    }

    public function __toString(){
        $tmp = "";
        if(is_null($this->getPattern()) === true){
            return $tmp;
        }
        $arClasses = explode('_&_', $this->getPattern());
        $max = count($arClasses);
        for($i=0;$i<$max;$i++){
            $tmp .= "<img class=\"".$arClasses[$i]."\" > ";
        }
        $tmp .= "\n";
        return $tmp;
    }
}


class WheelAndPattern extends BasePattern{
    protected $wheels;

    public function __construct($pWheels, $pPattern){
        $this->$wheels = $pWheels;
        parent::__construct($pPattern);
    }


    public function getWheels(){
        return $this->wheels;
    }

    public function __toString(){
        $tmp = "";
        if(is_null($this->getPattern()) === true || is_null($this->getWheels() === true)){
            return $tmp;
        }
        $arClasses = explode('_&_', $this->getPattern());
        $max = count($arClasses);

        $arWheeltypes = explode('_&_', $this->getWheels());
        $maxWheels = count($arWheeltypes);
        if($max === $maxWheels){
            for($i=0;$i<$max;$i++){
                $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[$i]."\> ";
            }
        }else{
            for($i=0;$i<$max;$i++){
                $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[0]."\> ";
            }
        }
        $tmp .= "\n";
        return $tmp;
    }
}

$wg = new BasePattern('wheelsleft_&_wheelsleft_&_wheelsright_&_wheelsright');
$wg2= new WheelAndPattern('openWheel','wheelseven_&_wheelseven_&_wheelseven');
$wg3= new WheelAndPattern('blackWheel_&_greyWheel_&_whiteWheel','wheelsleft_&_wheelscenter_&_wheelsright');
print $wg.$wg2.$wg3;

Answer 2

不知道为什么这么多人点赞这个问题

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

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

但是连这个问题都没有问清楚，预期结果也没有描述好。

所以这是我的猜测：

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

在foreach中按百分比定位

positioning by percentage in a foreach

html

css

php

mysqli