Img & Text, umfließen und responsive

Uwe_B · #1 (**permalink**) 23.03.2015, 17:00

Hallo zusammen,
ich habe folgendes vor Design vor:

IMG <----- Text
Text, Text, Text

Wenn rechts vom IMG weniger als 200 Pixel übrig sind, soll es so aussehen:

IMG
Text, Text, Text

Wenn ich nun beides in einen Container packe und dem IMG float:left gebe, klappt die erste Variante, aber nicht die zweite, weil min-width: 200px; dann beim Text-Element nicht wirkt.

We ich dem Text overflow:auto gebe, funktioniert min-width: 200px; - aber der Text umfließt das IMG nicht mehr.

Eigentlich doch ein übliches Design, aber wie löse ich das? Ich probiere hier schon eine Weile mit den verschiedensten Befehlen rum und komme nicht drauf...

K.Roland · #2 (**permalink**) 23.03.2015, 23:15

Hallo Uwe B

Kannst du das nicht, so lösen mit (Media Queries)

Beispiel: Edit fiddle - JSFiddle

____________
MfG Roland

MrMurphy · #3 (**permalink**) 24.03.2015, 07:20

Hallo,

Zitat:

Wenn ich nun beides in einen Container packe und dem IMG float:left gebe, klappt die erste Variante, aber nicht die zweite, weil min-width: 200px; dann beim Text-Element nicht wirkt.

Dafür gibt es mit HMTL / CSS keine Lösung. Es gibt nur mit HTML / CSS keine Möglichkeit auf eine Containerbreite zu reagieren. Eventuell funktioniert es mit JavaScript, damit kenne ich mich aber nicht aus.

Gruss

MrMurphy

cloned · #4 (**permalink**) 24.03.2015, 07:52

Sicher? gibt es diese Möglichkeit. Mit calc() sollte das doch hinzubekommen sein?

MrMurphy · #5 (**permalink**) 24.03.2015, 09:26

Hallo,

ich verstehe das Problem so, das sich in einem div-Element mehrere andere div-Elemente befinden, in denen sich wiederum ein Bild und Text befindet. Sobald die inneren div-Elemente schmaler als 200px werden, soll der Text unter das Bild rutschen.

Auf die konkrete Breite der inneren div kann meines Wissens nach nicht mit HTML und CSS reagiert werden.

Responsive Design kann nur die Fensterbreite abfragen und darauf reagieren, nicht aber auf die Breite einzelner Container.

Wenn es dafür doch eine Lösung ohne JavaScript gibt würde ich die natürlich gerne erfahren.

Gruss

MrMurphy

cloned · #6 (**permalink**) 24.03.2015, 10:15

Hmm ja, das dürfte wohl doch nicht so wie von mir vorgeschlagen funktionieren :/ Da habe ich zu voreilig gepostet. Ungetester Vorschlag von mir wäre so in etwa: Dem bild ein calc(100% - 200px) und min-width: 200px zu geben. Aber ob es den gewünschten Effekt hat ist auszuprobieren.
Unabhängig davon: Ich denke, dass seine Herangehensweise aber nicht ganz die korrekte ist. Man kann ja definieren: Bei zu kleiner Auflösung wird Text + Bild immer untereinander dargestellt, egal wie viele Pixel frei sind.

Uwe_B · #7 (**permalink**) 24.03.2015, 15:16

Mmh, ich hätte nicht gedacht, dass das so kompliziert ist.

Also aktuell sieht es so aus, dass img float:left hat, der Text overflow: auto und min-width: 200px; - so wird der Text rechts neben dem Bild dargestellt und bei weniger Platz/Bildschirmauflösung unterhalb des Bildes dargestellt.

Ich dachte es gäbe vielleicht irgendeine Möglichkeit, dass der Text das Bild umfließt und sich ansonsten ebenso verhält. Das Problem ist ja, dass der Text bei float:left; des img das Bild schön umfließt, aber nur einzelne Kurzworte rechts vom Bild angezeigt werden, wenn der Platz schmaler wird.

Falls es da keine Möglichkeit gibt, arbeite ich weiterhin mit overflow:auto

Danke!

cloned · #8 (**permalink**) 24.03.2015, 15:56

200px ist ja so gut wie nichts. Ich bin der Meinung für dein Problem gibt es eine simple Lösung, wenn du dich einmal von den fixen 200px lösen kannst. Bei welcher Situation tritt denn dein Problem genau auf? Auf smartphones? (also kleinen displays im allgemeinen)? Oder nur, wenn die Bilder zu groß werden? oder ... ?

K.Roland · #9 (**permalink**) 24.03.2015, 20:29

Zitat:

Zitat von Uwe_B

Falls es da keine Möglichkeit gibt, arbeite ich weiterhin mit overflow:auto

Also so hast du es, richtig? http://jsfiddle.net/cofnu19s/

Hast du das auch Mal mit Firefox getestet?
Da funktioniert das anscheinend nicht so mit overflow: auto.

_____________
MfG Roland

Nachtrag

Ja doch es funktioniert auch im Firefox.
Ich hatte das Fenster nicht klein genug in der Höhe ohne Scrollbalken.

Uwe_B · #10 (**permalink**) 25.03.2015, 21:52

Also genau genommen sieht es so aus:

HTML-Code:

<div style="border: 1px solid #cdc0b0; border-radius: 4px; padding: 10px; margin-bottom: 15px;">
<img style="float:left; margin: 0 10px 10px 0; width: 200px; height: 150px;" src="http://placehold.it/100x100/0eafff/ffffff.png" alt=""/>
	<div style="overflow: auto; width: auto; min-width: 200px;">
	<p style="margin: 0 0 5px;">Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit.</p>
	</div>
<div style="clear: both;"></div>
</div>

PS: Ich weiß leider nicht wie man das Tool von deinem Link benutzt..

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 17:30
Wachsende Container	Andy CD	CSS	13	10.02.2010 13:08
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche	nick	CSS	12	15.01.2008 20:52
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03