nicht angemeldet
Hallo!
Folgendermaßen sieht im Prinzip eine meiner Seiten aus:
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
img {margin:5px 20px; float:left;}
</style>
<title>Image Reflow-Test</title>
</head>
<body>
<img src="image.gif" width="100" height="110" />
<img src="image.gif" width="100" height="51" />
<img src="image.gif" width="100" height="100" />
<img src="image.gif" width="100" height="100" />
</body>
</html>
Also mehrere Bilder nebeneinander, keine Tabelle, wenn die Seite zu eng wird, bricht die Reihe um.
Das funktioniert auch tadellos wenn die Bilder alle gleich hoch sind. Sind sie es nicht (wie in o.g. Testcase), gibt es zwei Probleme:
1. Alle Bilder sind an der Oberkante ausgerichtet, ich möchte sie aber an der Unterkante ausgerichtet haben.
2. wandern wegen zu enger Seite die rechten Bilder nach links, landen die nicht am linken Dokumentrand, sondern bleiben am höchsten (hier ersten) "hängen".
Ich habe schon versucht, die <img> mit vertical-align:bottom; zu behandeln und auch sie in <div> zu kapseln und mit vertical-align:bottom; zu formatieren, alles nichts. Auch height:110px; auf das <img> ist sinnlos, weil damit auch das Bild skaliert würde bzw. auf ein <div> um die einzelnen <img> angewendet ergibt das einen sofortigen Umbruch.
Also geht das nicht, oder verstehe ich das Box-Model immer noch nicht?
Ciao,
Johannes
Gernot Back
Gunnar Bittersmann