Salut!
Im Quelltext habe Text und dan ein Bild. Nun möchte ich den Text rechts unten beim Bild haben:
+---------->--->--
| |
| |
| Höhe des Bildes |
| immer 300px; |
| | . . . . . . . . . . . .
| Breite des | ^ ^
| Bildes ist | | |
| nicht angegeben | | |
| und ist | | Der Text muss |
| verschieden | | unten beginnen |
| | | und je nach Menge |
| | | nach oben auffüllen |
+---------->--->--- +------------------->---
Wichtig: Im Quelltext muss erst der Text erscheinen und erst nach dem Text das Bild.
Trotz angestrengten Versuchen gelang es mir nicht, oben abgebildetes Layout mit CSS zu erzeugen. Als besondere Schwierigkeit ist die dynamische Breite des Bildes, welche man nicht im Voraus weiss.
Folgendes habe ich versucht:
<div style="float:right; height:300px; width:200px; vertical-align:bottom; border: 1px red solid;">
<p> Da haben wir einiges an Text. Machen wir auch mehrere Absätze rein. Nach diesem Satz machen wir den zweiten Absatz. </p>
<p> hier haben wir den zweiten Absatz. Gut gell. Auch hier schreiben wir einiges rein. Wir können so viel schrieben, wie wir wollen.
</p><p>hier ist noch ein Dritter Absatz. Cool gell!</p>
</div>
<div style="border: 3px solid black;">
<IMG SRC="http://www.google.ch/images/firefox/fox1.gif" style="height:300px; border:2px blue solid;" ALT="">
<p>unter dem bild</p>
</div>
Fragen:
- Wie bringe ich die Textbox exakt an den rechten Bildrand???
(Auch wenn ich gar nicht weiss, wie breit das Bild ist!)
- Warum greift "vertical-align:bottom;" nicht?
Kannst du mir helfen?
Gruss
Schorsch