Создание составной столбчатой ​​диаграммы с помощью CSS: проблема с шириной в процентах

Question

Мне нужно реализовать быструю и грязную столбчатую диаграмму со значениями 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 здесь, но все мало что дает.

Можете ли вы помочь?

Answer 1

Похоже, вам просто не хватает "display: block;" на ваших пролетах. Но в любом случае использование списка, возможно, более семантическое, и все, что вам нужно сделать, это установить ширину и цвета.

http://jsbin.com/ajuna4

Answer 2

Я бы использовал div вместо span, а также дал бы высоту div, иначе они не будут отображаться. Если вы хотите, чтобы элементы div располагались горизонтально, установите значение float: left;

Answer 3

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

Скрипка