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>

哪个收益率：

With absolute position

删除绝对位置产生： without absolute position

任何线索？

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值应始终是唯一的。你应该把它改成一个类。

Answer 2

一种愚蠢的解决方案，但也许你可以使用的解决方案：http://jsfiddle.net/ajhf7/2/

我在条形码#graph-container周围调用了div，并赋予它们以下属性：

#graph-container {
    position: relative;
    bottom: -41%;
}

41％的计算方法是从100％中减去最高的条形图（59％）。

之前使用vertical-align: bottom发布的解决方案显然更清晰，不需要任何计算，但如果由于某些原因对您不起作用，可以选择其他方式。

（请注意，我还从position: relative元素中移除了.bar和其他一些内容，并将其从#bar更改为.bar，因为没有重复的ID规则。）

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

2 个答案: