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

Před 1 lety napsal Principal

Vyřešeno
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:

RE: CSS - při vytváření grafů se…

Před 1 lety napsal Hanz

Zkontrolováno

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;
}
Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace