编写基于动态PHP css的进度条 - 数学百分比问题

Question

I'm coding a PHP progress bar that will update itself via a percent number that is given to it but I'm having issues working out the percents.

My code currently is as follows:

PHP

$percent = $_GET['percent'];

if($percent < 5)
    //low-image.jpg

elseif($percent > 95)
   //high-image.jpg

else{
$lowpercent = 100 - $percent;

$highwidth = 270 / 100 * $percent;
$lowwidth = 270 / 100 * $lowpercent;

HTML

<div class="first"></div>
<div class="mid-first" style="width:<?=$highwidth?>px;"></div>
<div class="mid-second" style="width:<?=$lowwidth?>px;"></div>
<div class="last"></div>

CSS

.first. mid-first, .mid-second, .last{
    display:block;
    float:left;
    height:62px;
    }
.first{
    background:url(low.png);
    width:31px;
}
.mid-first{
    background:url(mid-first.png) repeat-x;
}
.mid-second{
    background:url(mid-second.png);
}
.last{
    background:url(high.png);
    width:32px;
}

The Problem

At the moment the percents are worked out slightly incorrectly, my maths brain seems to have been misplaced today...

There are 4 divs, the first and last div take up 5% each so 10%, the middle divs then equal the other 90%.

This means when the figure 50 is given passed in via the $_GET it will work out 50% of the middle bars not including the 5% first bar, which is wrong, it should take the first 5% into account and then work out the 50% pixel widths?

How can I change the maths behind the percent to fix the two middle bars so that when 50% is applied both middle bars are equal in pixels?

Answer 1

There's no good reason to use pixels at all. Wrap your divs inside a containing div and use percentages in your CSS.

PHP:

$lowpercent = 100 - $percent;

HTML:

<div class="barwrapper">
    <div class="first"></div>
    <div class="mid-first" style="width:<?=($percent-5)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent-5)?>px;"></div>
    <div class="last"></div>
</div>

CSS:

.first{
    background:url(low.png);
    width:5%;
}
.last{
    background:url(high.png);
    width:5%;
}

OR, if you don't want first and last to be taken away from the 100%:

<div class="first"></div>
<div class="barwrapper">
    <div class="mid-first" style="width:<?=($percent)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent)?>px;"></div>
</div>
<div class="last"></div>

CSS:

.first{
    background:url(low.png);
    width:30px;
}
.last{
    background:url(high.png);
    width:30px;
}