在水平条形图中排列基于百分比的 div？

Question

我正在尝试创建一个水平 HTML 条形图，但在布局时遇到了一些问题。基本上我想要一个带有 10 条等距垂直线的背景图像的 div，然后在该 div 中有几个基于百分比的宽度的 div。

功能上，一切都按预期工作，但我很难弄清楚如何让条形图与背景图像中的垂直线对齐。

例如，如果一个条的宽度为 60%，它应该与第 6 条垂直线对齐。

HTML：

<div class="chart">
    <div class="bar-container">
        <div data-percentage="70" class="bar">Product 1</div>
        <div data-percentage="30" class="bar">Product 2</div>
        <div data-percentage="90" class="bar">Product 3</div>
    </div>
</div>

CSS：

.chart {
    width:320px;
    height:200px;
    background-image:url('http://s15.postimg.org/ku83p3fvf/bars.png');
    background-repeat:no-repeat;
    background-size:contain;
    position: relative;
}
    .chart .bar-container {
        position:absolute;
        bottom:30px;
        width:100%;
    }
        .chart .bar-container .bar {
            background:#55565a;
            margin-top:5px;
            color:#fff;
            font-size:16px;
            padding:2px 0;
        }

Javascript：

$('.bar').each(function() {
    percentage = $(this).attr('data-percentage');
    $(this).css('width',percentage+'%');
});

JSFiddle

任何想法我在这里忽略了什么？

Answer 1

您将背景图像划分为九个小节，而不是十个小节。因此，您必须做一些数学运算才能使宽度匹配。或者，您可以将图像设为 10 条而不是 9 条。 Heres a fixed JSFiddle，注意 Jquery 部分的数学运算

$('.bar').each(function() {
    percentage = $(this).attr('data-percentage');
    $(this).css('width',percentage / .9 +'%');
});