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

您将背景图像作为NINE条的分割，而不是TEN。因此，你必须做一些数学运算才能使宽度匹配。或者，您可以将图像设为10条而不是9条。 Heres a fixed JSFiddle，注意在Jquery部分中完成的数学

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

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

1 个答案: