我有一个奇怪的问题,我无法弄清楚。我有一个 div,其中包含定位不同的锚标记,具体取决于它们是否有文本。
我想做的是有一个简单的条形图,条形图内显示数字,数字在底部对齐。在下面的示例中,顶部图表的条形与底部正确对齐,但在底部图表中,只要我添加数字,它就会翻转到顶部。任何想法发生了什么以及我如何解决(或更好的方法)?
<!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>