html - 如何在没有固定高度的情况下将条形图条附加到底部

Question

我正在尝试制作一个条形图来显示访问者统计信息，但我不知道如何在不知道确切高度的情况下将条形图附加到底部。我以 % 为单位计算高度，每次检查时基本上都不一样，所以我无法设置固定高度。

我的代码是:

CSS:

#graph {
    width: 447px;
    height: 250px;
    border: 1px solid #aeaeae;
    background-image:url(css/bargraph.png);
    background-repeat:repeat;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    position: relative;
}

#graphtext {
    padding-left:17px;
    width: 430px;
    height: 20px;
    background-color:#CCC;
    font-size:9px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.bartext {
    width: 10%;
    margin-right: 17px;
    display: inline-block;
    height:20px;
    text-align:center;
    margin-top:5px;
}

#bar {
    width: 10%;
    display: inline-block;
    margin-right:17px;
    background-image: linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);
    background-image: -o-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);
    background-image: -moz-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);
    background-image: -ms-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    position:absolute !important;
    bottom:0px !important;
}

和 HTML:

<div id="graph">
<div style="height:250px; width:447px; position:absolute;">
            <div style="height: 29%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 11%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 6%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 49%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 59%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 2%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div><!--
         --><div style="height: 40%;" id="bar" title="43234 Visitors, 3024 Unique Visitors"></div>
</div>
</div>
<div id="graphtext">
        <div class="bartext">Monday</div><!--
        --><div class="bartext">Tuesday</div><!--
        --><div class="bartext">Wednesday</div><!--
        --><div class="bartext">Thursday</div><!--
        --><div class="bartext">Friday</div><!--
        --><div class="bartext">Saturday</div><!--
        --><div class="bartext">Sunday</div>
</div>

产生:

删除绝对位置会产生:

有什么线索吗？

Answer 1

如果你绝对定位一个元素并且没有设置左或右，它默认为 left: 0 导致你所有的条都在左边。

您可以删除绝对定位，只需将 vertical-align: bottom 添加到框中，并将父 div 的 line-height 设置为其高度:

<div style="height:250px;line-height: 250px; width:447px; position:absolute; ">

#bar {
    /* ... */

    vertical-align: bottom;
}

http://jsfiddle.net/NLf6j/

正如评论中所指出的，id 值应该始终是唯一的。您应该将其更改为一个类。