Comment aligner verticalement les div flottantes vers le bas?

Question

Parce que des exemples de la règle: http://jsfiddle.net/rudiedirkx/wgue7/

Comment puis-je obtenir les barres vers le bas au lieu du haut? Maintenant, ils sont coller à la partie supérieure du conteneur (#bars) mais j'ai envie de leur coller au fond.

Comme vous pouvez le voir, je ne connais pas la hauteur de la barre la plus haute, donc je ne sais pas la hauteur du conteneur.

Ces q+un ne l'aide pas: alignez Verticalement flottant divs, alignez Verticalement flottant DIVs

Doit être simple, non? Si cela aide: il a seulement à un travail décent dans les navigateurs.

PS. Le nombre de barres est variable (pas dans l'exemple) et leurs hauteurs sont. Seulement de leurs largeurs sont statiques. Positionnement absolute ne va pas aider, car le div conteneur n'a pas de mesures.

Answer 1

Cela fera l'affaire:

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

Il utilise display: table-cell; sur le div parent, qui par défaut est vertical-align: baseline; appliquée. Cela modifie la nécessité d' float: left; sur l'enfant divs et nous permet d'utiliser display: inline-block;. Cela supprime également la nécessité pour votre CSS clear fix.

EDIT - Par @thirtydot commentaires, ajout d' vertical-align: bottom; pour l'enfant divs supprime l'espace en bas.

Donc, j'ai modifié le CSS ci-dessus et jsFiddle. J'ai gardé l' display: table-cell; , de sorte que le div parent enveloppe l'enfant divs avec 0 de rembourrage et de l'air sympa et super beau!

Answer 2

FLEXBOX! Flexbox est le plus bestest. C'est la plus meilleure de toutes les boîtes et c'est superflexy. Son flexiness est seulement dépassé par sa volonté d'être le plus bestest. Assez parler de ça.

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

Flexbox rend cette ridiculement simple (et ne pas oublier de corriger):

#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 */
}

W00t!? Qui est-ce? Qui est-il. Deux (très mal) les lignes o' CSS: display: flex et align-items: flex-end.