web-dev-qa-db-fra.com

Comment aligner verticalement les divs flottants vers le bas?

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

Comment obtenir les barres en bas au lieu du haut? Maintenant, ils collent au haut du conteneur (#bars) mais je veux qu'ils collent au fond.

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

Ces q + a n'aident pas: aligner verticalement les divs flottants , aligner verticalement les divs flottants

Devrait être simple, non? Si cela aide: il ne doit fonctionner que dans des navigateurs décents.

PS. Le nombre de barres est variable (pas dans l'exemple) et leurs hauteurs sont. Seules leurs largeurs sont statiques. Le positionnement de absolute n'aidera pas, car la div du conteneur n'a pas de mesures.

csscss-floatvertical-alignment
48
Rudie

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 a par défaut vertical-align: baseline; appliqué. Cela change la nécessité de float: left; sur les divs enfants et nous permet d'utiliser display: inline-block;. Cela supprime également la nécessité de votre correction claire CSS.

EDIT - Selon les commentaires de @ thirtydot, en ajoutant vertical-align: bottom; aux divs enfants supprime l'écart en bas.

Par conséquent, j'ai changé CSS ci-dessus et jsFiddle. J'ai gardé le display: table-cell; pour que le div parent enveloppe les divs enfants avec un remplissage 0 et ait l'air sympa et élégant !

51
Code Maverick

FLEXBOX! Flexbox est le meilleur.

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

Flexbox rend cela ridiculement simple (et sans oublier correct ):

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

C'est tout Deux lignes de CSS: display: flex et align-items: flex-end.

37
Rudie