Align Liste der Bilder mit CSS

Question

Ich möchte eine Liste der Bilder, die auf ‚unten‘ auszurichten, wie kann ich diese mit CSS erreichen?

Hintergrund: Ich möchte eine Reihe von Fotos auf den Boden ausgerichtet wird, sind die Bilder in verschiedenen Größen

.

<div>
  <ul>
    <li> <!-- image 1-->
    <li> <!-- image 2-->
    <li> <!-- image 3-->
  </ul>
</div>

Danke.

Answer 1

Das Problem bei all dieser absoluten Positionierung ist, dass die li-Elemente keine Höhe haben werden, da das Bildelement absolut ist, und drücken Sie kein Layout mehr. typischerweise das ist eine schlechte Lösung.

Je nachdem, was Sie brauchen, könnte dies funktionieren:

li {
  display: inline;
  vertical-align: bottom;
}

Live-Beispiel hier: http://mooshell.net/zBCGW/

Answer 2

ul{ li-style-type: none;}

li{position:relative; float: left; width:100px; height: 100px; }

li img { display: block; position: absolute; bottom: 0; }

Dann

<ul> <li><img /></li>...</ul>

Answer 3

Das folgende CSS sollte es tun:

ul{ li-style-type: none;}

li img {position:absolute;bottom:0;}

li {float:left;vertical-align:bottom;}

Answer 4

Versuchen Sie einfach, versuchen Sie dies:

li img{
    position:absolute;
    bottom:0;
}
li{
    position:relative;
}

EDIT: Ich habe gerade gelesen, dass sie dazu bestimmt sind, auf den Boden des li Elements ausgerichtet werden. Ich den Code aktualisiert, so wird das img an der Unterseite des li Element ausgerichtet werden.