0

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

我的代码是：

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>

产生：

有绝对位置

并删除绝对位置产生： 没有绝对位置

有什么线索吗？

4

2 回答 2

2

如果您绝对定位一个元素并且不设置左侧或右侧，则默认为 left: 0 导致所有条形都在左侧。

您可以删除绝对定位并简单地添加vertical-align: bottom到框中并将line-height父 div 的设置为等于其高度：

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

#bar {
    /* ... */

    vertical-align: bottom;
}

http://jsfiddle.net/NLf6j/

正如评论中所指出的，id值应该始终是唯一的。你应该把它改成一个类。

于 2013-05-02T17:21:12.090 回答
0

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

我已经将条形周围的 div 称为#graph-container，并赋予它以下属性：

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

41% 的计算方法是从 100% 中减去最高的条 (59%)。

前面发布的解决方案vertical-align: bottom显然更干净，不需要任何计算，但如果由于某种原因对您不起作用，这里有一个替代方案。

（请注意，由于 no-duplicate-ids 规则，我还position: relative从元素中删除了一些其他内容.bar，并将其从 更改为#bar。 ）.bar

于 2013-05-02T17:37:01.847 回答