Php 反向垂直条形图_Php_Html_Css

Php 反向垂直条形图

php html css

Php 反向垂直条形图,php,html,css,Php,Html,Css,index.php <?php $Dpoint = 80; $Ipoint = 70; $Hpoint = 60; $Apoint = 90; $max = 250; // max point 250; $percent = 100; //set 100 percent; $scale = 4.0; // if ( !empty($max) ) { $Dpercent = ($Dpoint * $percent) / $max; $Ipercent = ($Ipoint * $per

index.php

<?php
$Dpoint = 80;
$Ipoint = 70;
$Hpoint = 60;
$Apoint = 90;
$max = 250; // max point 250;
$percent = 100; //set 100 percent;
$scale = 4.0; //

if ( !empty($max) ) {
 $Dpercent = ($Dpoint * $percent) / $max;
 $Ipercent = ($Ipoint * $percent) / $max;
 $Hpercent = ($Hpoint * $percent) / $max;
 $Apercent = ($Apoint * $percent) / $max;
}
?>
<html>
<head>
</head>

<body>
    <label><strong>A</strong></label><div class="bar"><div style="height:<?php echo round($Dpercent * $scale); ?>px;"></div></div><p><?php echo("{$Dpercent}%"."<br />");?></p>
    <label><strong>B</strong></label><div class="bar"><div style="height:<?php echo round($Ipercent * $scale); ?>px;"></div></div><p><?php echo("{$Ipercent}%"."<br />");?></p>
    <label><strong>C</strong></label><div class="bar"><div style="height:<?php echo round($Hpercent * $scale); ?>px;"></div></div><p><?php echo("{$Hpercent}%"."<br />");?></p>
    <label><strong>D</strong></label><div class="bar"><div style="height:<?php echo round($Apercent * $scale); ?>px;"></div></div><p><?php echo("{$Apercent}%"."<br />");?></p>
</body>
</html>

我正在尝试制作垂直条形图，但蓝色的条形图是从上到下的，如何反转它？所以我的意思是蓝色条从下面开始

我似乎不能把下面的文字也写下来，有人能帮我把这个酒吧弄得更像吗？然后反转蓝色条？

不确定您想要怎样，但这些条是从底部向上的。关键是使用正确的

位置

设置和坐标

.bar{
背景：灰色；
宽度：16px；
填充：1px；
高度：160px；
位置：相对位置；
显示：内联块；
}
.酒吧部{
背景色：#00aeef；
位置：绝对位置；
底部：1px；
宽度：16px；
左：1px；
}

这看起来更像是HTML/CSS问题-您可以将其制作成一个简单的HTML/CSS，以便于回答。谢谢您，您是最棒的！！这就是我想要的，但若我有文本，还有一个更简单的问题，那个就是如何把它们全部放到右边？我编辑了你的代码，你能检查一下吗？对不起，我不太明白你想做什么。把文本放在栏里？

.bar{
    margin:auto;
    background: grey;
    width: 16px;
    /*margin: 0 0 5px 10px;*/
    padding: 1px;
    height: 400px;
    float:left;
}

.bar div{
    background-color: #00aeef;
    height: 16px;
}