Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

RWD und umfließender Text

Freitag, 20. November 2015

Bilder von Text umfließen lassen — mit CSS float kein Problem:

Screenshot 1
Text umfließt mehrere Bilder. Hässlicher Leerraum wird dadurch vermieden.

Auf Tablets, Smartphones und unterschiedlichsten Monitorgrößen kann sich jedoch ein hässlicher Effekt ergeben.

Screenshot 2
Der für den Text verfügbare Platz wird so schmal, dass nur noch ein Wort pro Zeile angezeigt wird.

Diesen Effekt zu vermeiden, ist gar nicht so trivial. CSS min-width für den umfließenden Text scheitert. Lange Zeit habe ich mir damit beholfen, zwischen die ersten Wörter des floatenden Textes mehrere  s einzufügen. Sehr unästhetisch. Seit ich automatische Tennung (hyphens) für Fließtexte verwende, genügte selbst das nicht mehr.

Meine Lösung:
Vor den floatenden Text kommt ein <div class="minwidth"></div>
und ins CSS:
.minwidth {min-width:10em;overflow:hidden;}

Wenn neben dem Bild weniger als 10em Platz verfügbar ist, wird das Div — und damit auch der folgende Text — unter das Bild geschoben. Problem gelöst.

Aber ein leeres Div manuell ins Markup einfügen, um das Layout zu retten. Das ist ja schon wieder "bäh".

An dieser Stelle kommt die Allzweckwaffe jQuery zum Einsatz.

$(function() {
$('.toolthumb').after('<div class="minwidth"></div>');
});

fügt nach jedem Element mit der Klasse toolthumb (also nach all meinen zu umfließenden Bildern) das obige Div ins DOM ein.
Problem gelöst. Ohne zusätzliches Markup, und vor allem, ohne dass ich in jedem einzelnen Fall dran denken müsste.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE