У меня есть страница, которая выглядит, как это прямо сейчас:позиционирование по проценту в Еогеасп
и код для этого:
<?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 метров. Теперь я масштабироваться это до percantages: (см ширина изображения)
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 (25meter). Теперь мне также нужно это для положения оси.
Таким образом, ось 1 =, например, 10% от общей суммы. Поэтому мне нужно, чтобы он оставался на 10% слева (маржа)
ось 2 = 5%. Поэтому мне нужна ось 1 + 5% = 15% слева. и т.д.
Каждый мост имеет свой собственный идентификатор (Здесь DB изображение)
Так в конце концов, я хочу, чтобы конечный результат должен выглядеть как маленький поезд. (Итак, первые две оси оставлены и последние 2 оси вправо) под изображением поезда. 
Вы могли бы найти [это] (http://codepen.io/jbutler483/pen/VYzKaP) использования с точки зрения позиционирования – jbutler483
Глядя многообещающий @ jbutler483. Я посмотрю на это! :) – Mitch
У вас есть id count_axle_figure четыре раза в вашем коде. Это невозможно, идентификатор должен появляться только один раз на странице. Колеса должны отображаться с использованием float: left и float: right. Поэтому у вас есть два класса: один для колес, другой - для правых колес. Тогда вам не нужно добавлять стиль в div # count_axle_figure. –