CSS - při vytváření grafů se sloupce zobrazují obráceně

Ahoj,

snažím se udělat základní graf, kdy data generuji z PHP a pomocí CSS je vykresluji, konkrétně jen primitivně měním výšku div dle hodnoty. To vše funguje správně, avšak div třídy graphWide se "přichytává" k horní (top) hraně místo ke spodní (bottom) divu třídy graphContainerWide. Jak bych to měl vyřešit? Díky

HTML kód:

<div class="graphContainerWide">
<div class="graphWide" style="height: 12px; background-color: #4CAF50;">12</div>
<div class="graphWide" style="height: 12px; background-color: #4CAF50;">12</div>
<div class="graphWide" style="height: 12px; background-color: #4CAF50;">12</div>
<div class="graphWide" style="height: 12px; background-color: #4CAF50;">12</div>
<div class="graphWide" style="height: 12px; background-color: #4CAF50;">12</div>
</div>

CSS styly:

.graphContainerWide { width: 100%;}
.graphWide { color: white; width: 7px; max-height: 200px; float: left; font-size: 10px; bottom: 0;}

Vypadá to pak takhle - potřebuji zkrátka sloupce vertikálně otočit a přichytit ke spodní hraně divu:

ODPOVĚĎ

Ahoj,

zkus to takhle, u mě pak to zobrazení je v pořádku:

.graphContainerWide {
width: 100%;
}

.graphWide {
color: white;
width: 7px;
max-height: 200px;
font-size: 9px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: text-bottom;
}