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

Co nejvíce stručné řešení pro vývojáře a linux administrátory

Na superuser.cz nenaleznete žádný zbytečný obsah, vždy se jde přímo k věci, denně se zde objevují nové problémy a jejich řešení...

Začít používat

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

03.12.2017 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:

Zobrazit odpovědi

Nejlépe hodnocení uživatelé
Hanz

Počet UP: 5096

React: 215

Rusty

Počet UP: 2354

React: 100

OL3G

Počet UP: 1638

React: 60

Strosmajer

Počet UP: 496

React: 23

SYSTEM

Počet UP: 440

React: 23

Oxytocin

Počet UP: 298

React: 18

Hyacint

Počet UP: 40

React: 12

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

15.12.2017 odpověděl 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