2

我有一个奇怪的问题，我无法弄清楚。我有一个 div，其中包含定位不同的锚标记，具体取决于它们是否有文本。

我想做的是有一个简单的条形图，条形图内显示数字，数字在底部对齐。在下面的示例中，顶部图表的条形与底部正确对齐，但在底部图表中，只要我添加数字，它就会翻转到顶部。任何想法发生了什么以及我如何解决（或更好的方法）？

http://jsfiddle.net/dKM3T/2/

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css">
            .graph {
                width: 650px;
            }
            .graph .bar {
                width: 20px;
                margin: 1px;
                display: inline-block;
                background: #666;
                color: #fff;
                font-size: 10px;
                text-align: center;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="graph">
            <a href="#" class="bar" style="height:40px" data-index="1"></a>
            <a href="#" class="bar" style="height:20px" data-index="2"></a>
            <a href="#" class="bar" style="height:30px" data-index="3"></a>
            <a href="#" class="bar" style="height:20px" data-index="4"></a>
            <a href="#" class="bar" style="height:12px" data-index="5"></a>
            <a href="#" class="bar" style="height:32px" data-index="6"></a>
            <a href="#" class="bar" style="height:34px" data-index="7"></a>
            <a href="#" class="bar" style="height:12px" data-index="8"></a>
            <a href="#" class="bar" style="height:40px" data-index="9"></a>
            <a href="#" class="bar" style="height:20px" data-index="10"></a>
        </div>
        <div class="graph">
            <a href="#" class="bar" style="height:40px" data-index="1">40</a>
            <a href="#" class="bar" style="height:20px" data-index="2">20</a>
            <a href="#" class="bar" style="height:30px" data-index="3">30</a>
            <a href="#" class="bar" style="height:20px" data-index="4">20</a>
            <a href="#" class="bar" style="height:12px" data-index="5">12</a>
            <a href="#" class="bar" style="height:32px" data-index="6">32</a>
            <a href="#" class="bar" style="height:34px" data-index="7">34</a>
            <a href="#" class="bar" style="height:12px" data-index="8">12</a>
            <a href="#" class="bar" style="height:40px" data-index="9">40</a>
            <a href="#" class="bar" style="height:20px" data-index="10">20</a>
        </div>
    </body>
</html>
4

1 回答 1

1

试试这个：

<style type="text/css">
        .graph {
            width: 650px;
        }
        .graph .bar {
            vertical-align: bottom;
            width: 20px;
            margin: 1px;
            display: inline-block;
            background: #666;
            color: #fff;
            font-size: 10px;
            text-align: center;
            text-decoration: none;
        }
    </style>

数字仍显示在图表顶部，但图表不再翻转。如果您希望数字显示在底部，您可能需要采用与此处不同的方法。

于 2013-03-03T16:15:33.793 回答