Растущие элементы списка в виде графика

Question

У меня есть список, элементы которого динамически растут с помощью JavaScript до 100%.Это работает.Но я хочу, чтобы это выглядело как this

Так что моя проблема здесь.Как я могу заставить их расти до вершины.Я пытался с высоты, но потом они выросли до дна.Также вращение их с помощью CSS не работает, поскольку чем больше элементов списка добавляется, тем больше список перемещается вниз…

У кого-нибудь есть идеи?1009 *

Answer 1

Использовать абсолютное позиционирование для li -элементов.Пример:

http://jsfiddle.net/J5pB7/

ul{
    height:300px;
    border:1px solid #666;
    position:relative;
}
li{
    display:inline-block;
    width:20px;
    position:absolute;
    bottom:0px;
    background-color:green;
}
#a{
    height:50%;
    margin-left:30px;
}
#b{
    margin-left:80px;
    height:10%;
}
#c{
    margin-left:130px;
    height:90%
}