Zur Navigation

Bild und Text nach unten bündig mit CSS positionieren

1 lava

Hallo,
ich möchte innerhalb eines Abschnitts ein großes Bild mit einem kurzen Text nebeneinander so positionieren, daß beides unten ausgerichtet ist.

Mit Tabellen würde ich es so machen

<table>
<tr>
<td valign="bottom"><img src="meinbild.jpg"></td>
<td></td>
<td valign="top">Mein Text</td>
</tr>
</table>

Wie mache ich es mit CSS? Hätte gedacht, daß float-Anweisungen hier funktionieren würden

<div>
<img src="meinbild.jpg" style="float:left">
<div style="float:right;vertical-align:bottom"> Mein Text</div>
</div>
<div style="clear:both"></div>

aber das ist wohl nicht ganz richtig....

03.03.2009 17:33

2 Jörg Kruse

Ich würde Bild und Text in ein gemeinsames div packen und diesem eine line-height von der Höhe des Bildes zuordnen, dann sollte vertical-align wie gewünscht funktionieren:

<div style="line-height:50px; vertical-align:bottom"><img src="meinbild.jpg"> Mein Text</div>

03.03.2009 18:39

3 lava

Hm, der Text ist leider doch zweizeilig.... mit line-height krieg ich da einen zu großen Abstand zwischen den zwei Zeilen...geht es nicht doch irgendwie mit einem Bild-Div, einem Text-Div, ggf. weiteren Hilfs-Divs als gemeinsame Container und irgendwelchen Float-Anweisungen?

Ich hab's jetzt nochmal so versucht:

<div>

<p>
Dieser Text soll über das Bild
<p/>

<p>
<div style="float:left"/><img src="bild.jpg" /></div>
<div style="float:right;vertical-align:bottom;height:90px"/>Dieser Text soll daneben, nach unten ausgerichtet.</div>
</p>


<p style="clear:both">Dieser Text soll untendrunter.</p>

</div>


Leider: wenn ich das clear:both reinnehme, funktioniert das Floaten nicht, dann sitzt der Text unter

04.03.2009 10:33 | geändert: 04.03.2009 10:49

4 Jörg Kruse

Mit allen gängigen Browsern können soweit ich weiß außerhalb von Tabellenzellen nur Inline-Elemente vertikal ausgerichtet werden.

So funktioniert's in Opera, Firefox und Konqueror:

<div style="display:table-cell; vertical-align:bottom"><img src="meinbild.jpg" /></div>
<div style="display:table-cell; vertical-align:bottom">Mein<br/>
Text</div>

Aber IE 6 + 7 können das noch nicht (mit dem IE 8 habe ich es noch nicht getestet)

Ein ähnliches Problem hatten wir hier schon mal:

https://joergs-forum.de/bild-in-tabellenzeile-textumflossen-unten-positionieren-t-3137-1

Floatende Elemente können nicht einander nach unten ausgerichtet werden.

04.03.2009 10:59

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]