✔ Bilder unterschiedlicher Höhe anordnen

[-André-]

Hallo,
ich möchte Bilder mit verschiedenen Höhen in eine Liste anordnen. Die Liste wird Horizontal dargestellt, immer drei Bilder nebeneinander, dann in der nächsten Zeile wieder drei und so weiter. Ich möchte verhindern, dass, wenn ich zwei hohe Bilder neben einem kleineren Bild habe, unter dem kleineren Bild ein ganzes Stück frei bleibt. Kann man mit CSS es so einrichten, dass das Bild darunter „hochrutscht“. Als optisches Beispiel hab ich folgenden Link, jedoch wurde hier keine Liste verwendet: http://browsershots.org/screenshots/

Gruß

-André-

 

[Layna]

Ich kann da nur raten, aber:
Die Bilder sind in div's, jeders Bild-enthaltende div hat einen style-eintrag ähnelich:

<div style="width: 80px; height: 195px; left: 0px; top: 0px; position: absolute;" class="preview">

Ich vermute also die Position wird serverseitig Dynamisch berechnet.

 

[-André-]

Das hab ich auch schon herausgefunden, deshalb wollte ich ja wissen, ob das auch per CSS machbar ist.

Gruß

-André-

 

[Maik]

Hi,

ich hab anhand deiner Vorgaben ein Modell rekonstruiert, das in allen mir zur Verfügung stehenden Browser funktioniert:

ul {
margin:0;
padding:0;
list-style:none;
width:200px;
}

li {
display:inline;
}

li img {
vertical-align:top;
}

<ul>
    <li><img src="..." height="120" width="60"></li>
    <li><img src="..." height="60" width="60"></li>
    <li><img src="..." height="120" width="60"></li>
        <!-- nächste Reihe -->
    <li><img src="..." height="120" width="60"></li>
    <li><img src="..." height="60" width="60" style="margin-top:-60px;"></li>
    <li><img src="..." height="120" width="60"></li>
</ul>

Voraussetzung für die Funktionsfähigkeit ist, dass die Dimensionen der einzelnen Grafiken bekannt sind.

 

[-André-]

Danke für die Antwort, damit bin ich meinem Ziel schon ein ganzes Stück näher.

Gruß
-André-