Question

我必须实现一个只有DIV和SPAN s的快速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>

但这不起作用。有人能把我说得对吗？我想我需要在这里使用position: absolute/relative和/或float，但一切都没什么效果。

你能帮忙吗？

Answer 1

看起来你只是错过了“display：block;”在你的跨度。但无论如何，使用列表可能更具语义性，您需要做的就是设置宽度和颜色。

http://jsbin.com/ajuna4

Answer 2

我会使用div而不是跨度，并且还会给你的div高度，否则它们将不会显示。如果你想让div水平排列，那么设置float：left;

Answer 3

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

Fiddle

使用CSS制作堆积条形图：宽度为百分比的麻烦

3 个答案: