如何制作堆积条形图？

问题描述

| 我必须用仅0和1来实现一个快速的n脏堆积条形图，此刻我脑中的想法是这样的：

<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>

解决方法

        我会使用div而不是跨度，并给您div高度，否则它们将不会显示。如果要div水平排列，则设置float：left;。     ,        看来您只是在跨度上缺少\“ display：block; \”。但是无论如何，使用列表可以说是更具语义的，您所需要做的就是设置宽度和颜色。 http://jsbin.com/ajuna4     ,        

div>span
{
float: left;
border: 1px solid yellow;
background-color: green;
text-align: center;
}

小提琴