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

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;
}

Komentáře

Vaše reakce na CSS - při vytváření grafů se sloupce zobrazují obráceně

Související obsah

programovani

php

css

grafy

Reference

Podívejte se na naše reference

Prohlédnout

Aplikace

Podívejte se na naše aplikace

Prohlédnout

Co umíme?

Podívejte se co umíme

Prohlédnout

Co umíme?

Vytváříme sofistikované aplikace pro náročné

Od webových aplikací přes android až po převodové můstky či složité informační systémy.

Podívejte se k nám

Máte ještě čas? Podívejte se na další rubriky

Tento web používá soubory cookie. Dalším procházením tohoto webu vyjadřujete souhlas s jejich používáním.. Více informací zde.