Gráfico de barras CSS - muy simple

Question

Tengo un código muy básico y funciona, excepto que todo se alinea con la parte superior ... idealmente las barras se alinearían en la parte inferior. Supongo que podría usar el posicionamiento fijo ya que las dimensiones son cuadradas a 50px por 50px, pero preferiría algo un poco menos "fijo".

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

No quiero usar una biblioteca o JS add on. Mantener este peso ligero es una misión crítica.

También preferiría que las barras fueran verticales. ¿Algún gurú de CSS se preocupa por arrojar algo de luz que parece que me falta? He buscado en Google y la mayoría de los ejemplos son muy complicados a/sofisticado,

Answer 1

Antes que nada, separa tu CSS de tu HTML. Estás repitiendo demasiado código cuando podrías usar una clase de barra para tus divisiones internas.

bottom: 0 no cambia nada para div relativamente posicionado.

Si desea utilizar el posicionamiento relativo, deshágase del flotador y del fondo y utilice display: inline-block y vertical-align: baseline;. Además, en este caso, debe deshacerse de cualquier espacio en el HTML entre los divs internos (línea nueva).

gusta esta (se puede ver la demostración en 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

Uso position: absolute, y en vez de float:left; uso left: 0px;, 8px, 16px y así sucesivamente.
También agregue position: relative al contenedor.

Answer 3

respuesta de Kolink es correcta. El ancho de cada div de barra es 8px, más margin-left y margin-right, 8 + 1 + 1 = 10px. Así que sugiero, ajuste el valor de la izquierda a 0px, 10px, 20 píxeles ...

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

El CSS debe tener este aspecto (Agrupé algunas reglas generales 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; 

} 

Esto se puede comprobar link: http://jsfiddle.net/zhujy_8833/AFbt4/ para ver el resultado del código anterior.

Answer 4

Yo personalmente evitaría establecer xpos explícitamente en cada elemento, hace que las cosas sean menos fáciles de mantener. En algunos casos, los volcados basados ​​en porcentajes también serían más apropiados. Con eso en mente, un enfoque imo más escalable y semánticamente correcto se ha burlado en un fiddle. 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> 

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

Esto también le da potencial para llegar a ser muy elegante - barras podrían tener un contenido con un guión de texto negativo para el valor semántico o <span> elementos podrían ser abandonado por completo a favor de pseudo-elementos.

Answer 5

Si usted le da a los padres position: relative, entonces se puede utilizar position: absolute para el niño div para colocarlos en las coordenadas precisas fijando left, top, right, bottom, width, height se puede controlar con precisión la colocación de las barras en la barra de gráfico.

.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>