css - texto - ¿Cómo alinear verticalmente divs flotantes al fondo?

posicionar div abajo

Question

Porque los ejemplos rigen: http://jsfiddle.net/rudiedirkx/wgue7/

¿Cómo obtengo las barras en la parte inferior en lugar de la parte superior? Ahora se pegan a la parte superior del contenedor ( #bars ) pero quiero que se peguen a la parte inferior.

Como puede ver, no sé la altura de la barra más alta, así que no sé la altura del contenedor.

Estos q + a no ayudan: alinea verticalmente divs flotantes , alinea verticalmente DIVs flotantes

Debería ser simple, ¿verdad? Si ayuda: solo tiene que funcionar en navegadores decentes.

PD. El número de barras es variable (no en el ejemplo) y sus alturas son. Sólo sus anchos son estáticos. El posicionamiento absolute no ayudará, porque el div contenedor no tiene medidas.

Answer 1

FLEXBOX! Flexbox es el mejor.

Ejemplo: http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox hace esto ridículamente simple (y no olvidarlo correcto ):

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

Eso es. Dos líneas de CSS: display: flex y align-items: flex-end .

Answer 2

Esto hará el truco :

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

Utiliza display: table-cell; en el div padre, que por defecto tiene vertical-align: baseline; aplicado. Esto cambia la necesidad de float: left; en los divs secundarios y nos permite usar display: inline-block; . Esto también elimina la necesidad de su corrección de CSS.

EDITAR - Por los comentarios de @ treintadot, agregando vertical-align: bottom; a los divs de niños elimina la brecha en la parte inferior.

Por lo tanto, he cambiado CSS arriba y jsFiddle. Mantuve la display: table-cell; ¡para que el div padre envuelva a los divs infantiles con un relleno de 0 y se vea elegante y elegante!