HTML image en fond d'alignement à l'intérieur de la DIV conteneur

J'ai une balise div avec une hauteur fixe. La plupart des images ont la même hauteur et la largeur.

Je veux aligner les images au bas de la div, de sorte qu'ils sont joliment arrangé. Voici ce que j'ai à ce jour:

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

Le CSS ressemble:

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

J'ai réussi à aligner les images en bas avec display: table-cell et la vertical-align: bottom attributs css.

Est-il une manière plus propre que l'affichage de la div comme table-cell et en alignant les images au bas de la balise DIV?

InformationsquelleAutor Patric | 2011-06-29
  1. 46

    C'est votre code: http://jsfiddle.net/WSFnX/

    À l'aide de display: table-cell est bien, à condition que vous êtes au courant qu'il ne fonctionnera pas dans IE6/7. Autre que cela, c'est sûr: Est-il un inconvénient de l'utilisation de `display:table-cell on divs?

    De fixer l'espace en bas, ajouter vertical-align: bottom à la réelle imgs:

    http://jsfiddle.net/WSFnX/1/

    Supprimer l'espace entre les images se résume à ceci: bikeshedding propriété CSS3 alternative?

    Donc, voici une démo avec les espaces supprimés dans votre code HTML: http://jsfiddle.net/WSFnX/4/

    InformationsquelleAutor thirtydot
  2. 54

    Définir le div parent comme position:relative et l'intérieur de l'élément de position:absolute; bottom:0

    • Cela fonctionne uniquement si vous définissez la hauteur du conteneur.
    InformationsquelleAutor sekmo
  3. 12

    Flexboxes pouvez accomplir cela en utilisant align-items: flex-end; flex-direction: column; avec display: flex; ou display: inline-flex;

    div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

    CSS-Tricks est un bon guide pour flexboxes

    • Je pense que vous n'avez pas besoin de la flex-direction: column; partie; fonctionne bien pour moi!
    • Buggy soutien dans IE11, pas de support pour les précédentes versions IE, selon caniuse.com/#feat=flexbox
    InformationsquelleAutor Daniel
  4. 6

    <div> avec certaines proportions

    div {
  position: relative;
  width: 100%;
  height: 100%;
}

    <img>'s avec leurs propres proportions

    img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}
    InformationsquelleAutor comonitos