如何制作堆积条形图？
我必须用 DIV 和 SPAN 实现一个快速的脏堆积条形图，目前我脑子里的想法是这样的：
<div style='width:500px'>
<span class='d5' style='width:33%;'>5</span>
<span class='d4' style='width:27%;'>4</span>
<span class='d3' style='width:20%;'>3</span>
<span class='d2' style='width:13%;'>2</span>
<span class='d1' style='width:6%;'>1</span>
</div>但是，这不起作用。有人能纠正我吗？我认为我需要在这里使用position：absolute/relative和/或float，但一切都没有什么效果。
I've got to implement a quick n dirty stacked bar chart with just DIVs and SPANs, at the moment the idea I have in my head goes something like this:
<div style='width:500px'>
<span class='d5' style='width:33%;'>5</span>
<span class='d4' style='width:27%;'>4</span>
<span class='d3' style='width:20%;'>3</span>
<span class='d2' style='width:13%;'>2</span>
<span class='d1' style='width:6%;'>1</span>
</div>However, this isn't working. Can someone put me right? I think I need to use position: absolute/relative and/or float here but everything is having little effect.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
看来您只是缺少“display: block;”在你的跨度上。但无论如何，使用列表可以说更具语义性，您所需要做的就是设置宽度和颜色。
http://jsbin.com/ajuna4
It looks like you're simply missing a "display: block;" on your spans. But anyway, using a list is arguably more semantic and all you need to do is set the width and colours.
http://jsbin.com/ajuna4
我会使用 div 而不是 span，并给出你的 div 高度，否则它们将不会显示。如果您希望 div 水平排列，请设置 float:left;
I would use divs instead of the spans and also give your divs height otherwise they will not be displayed. If you want div's to be lined horizontally then set the float:left;
小提琴
Fiddle