Grafico a barre CSS - molto semplice

Question

Ho un codice molto semplice e funziona eccetto che tutto si allinea alla parte superiore ... idealmente le barre si allineano verso il basso. Suppongo che potrei usare il posizionamento fisso perché le dimensioni sono al quadrato a 50px per 50px, ma preferirei qualcosa di un po 'meno "fisso".

 <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;"> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div> 
     </div> 

Non voglio utilizzare una libreria o JS add on. Mantenere questo peso leggero è fondamentale.

Inoltre preferirei che le barre fossero verticali. Qualche guru dei CSS si preoccupa di perdere un po 'di luce? Mi sembra che manchi? Googled e la maggior parte degli esempi sono di gran lunga al complicata/sofisticate,

Answer 1

Prima di tutto, separa il tuo CSS dal tuo codice HTML. Stai ripetendo troppo codice quando potresti semplicemente usare una classe di barre per le tue immersioni interne.

bottom: 0 non cambia nulla per div in posizione relativa.

Se si desidera utilizzare il posizionamento relativo, eliminare il galleggiante e il fondo e utilizzare display: inline-block e vertical-align: baseline;. Inoltre, in questo caso, è necessario liberarsi di qualsiasi spazio nel codice HTML tra le div interne (newline).

Ti piace questa (si può vedere il demo http://dabblet.com/gist/2779082):

HTML

<div class="graph"> 
     <div style="height: 22px;" class="bar"></div><!-- 
     --><div style="height: 11px;" class="bar"></div><!-- 
     --><div style="height: 6px;" class="bar"></div><!-- 
     --><div style="height: 49px;" class="bar"></div><!-- 
     --><div style="height: 28px;" class="bar"></div> 
</div> 

CSS

.graph { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
} 
.bar { 
    width: 8px; 
    margin: 1px; 
    display: inline-block; 
    position: relative; 
    background-color: #aeaeae; 
    vertical-align: baseline; 
} 

Answer 2

Usa position: absolute, invece di float:left; uso left: 0px;, 8px, 16px e così via.
Aggiungere anche position: relative al contenitore.

Answer 3

risposta di Kolink è corretto. La larghezza di ogni barra div è 8px, più margine-sinistra e margine-destra, 8 + 1 + 1 = 10px. Quindi suggerisco, impostare il valore a sinistra 0px, 10px, 20px ...

<div class="wrapper"> 
    <div style=" left:0px;height:22px;"></div> 
    <div style="left:10px;height:11px;"></div> 
    <div style="left:20px;height:6px;"></div> 
    <div style="left:30px;height:49px;"></div> 
    <div style="left:40px;height:28px;"></div> 
</div> 

il CSS dovrebbe essere simile a questo (ho raggruppato alcune regole generali css):

.wrapper{ 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
    width: 50px; 
    height: 50px; 
    position : relative; 

} 

.wrapper > div{ 
    bottom: 0px; 
    width: 8px; 
    position : absolute; 
    background-color: #aeaeae; 
    margin: 1px; 
    display : inline-block; 

} 

È possibile controllare questo link: http://jsfiddle.net/zhujy_8833/AFbt4/ per vedere il risultato del codice sopra.

Answer 4

Eviterei personalmente di impostare xpos esplicitamente su ogni elemento, rende le cose meno mantenibili. In alcune scenografiche discariche di valori percentuali sarebbe anche più appropriato. Con questo in mente, in fiddle è stato preso in giro un approccio più scalabile e semanticalmente corretto. HTML:

<ul class="graph"> 
    <li><span style="height:45%"></span></li> 
    <li><span style="height:12%"></span></li> 
    <!--as many more items as you want !--> 
</ul> 

e CSS:

.graph { 
    border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/ 
    float:left; /*should be clearfix'd instead, but this is OK for a demo*/ 
} 
.graph li { 
    width:8px; height:50px; /*set a bar width and a full height*/ 
    float:left; /*to have bars "left-aligned"*/ 
    position:relative; /*needed for the actual bar fill element*/ 
    margin:2px; 
} 
.graph li+li { 
    margin-left:0; /*avoid margin double-up between bars as they don't collapse*/ 
} 
.graph span { 
    position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars, 
                widths will be set inline*/ 
    background-color: #aeaeae; 
} 

dà questo anche il potenziale per ottenere abbastanza fantasia - bar potrebbero avere un contenuto con un rientro del testo negativo per il valore semantico o <span> elementi potrebbero essere abbandonati del tutto a favore di pseudo-elementi.

Answer 5

Se si dà il genitore position: relative, quindi è possibile utilizzare position: absolute per il bambino div di metterli in coordinate precise impostando left, top, right, bottom, width, height è possibile controllare con precisione il posizionamento delle barre nella barra grafico.

.graph { 
 
    position: relative; 
 
    width: 54px; 
 
    height: 54px; 
 
    border: 1px solid blue; 
 
    background-color: lightgrey; 
 
} 
 

 
.bar { 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    background-color: yellow; 
 
}

<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div> 
 
    <div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div> 
 
    <div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div> 
 
    <div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div> 
 
    <div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div> 
 
    </div> 
 
</div> 
 

 
<p></p> 
 

 
<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div> 
 
    <div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div> 
 
    <div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div> 
 
    <div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div> 
 
    <div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div> 
 
    </div> 
 
</div>