Img & Text, umfließen und responsive - Seite 2

K.Roland · #11 (**permalink**) 26.03.2015, 07:41

Zitat:

Zitat von Uwe_B

Also genau genommen sieht es so aus:

O.K. Ich habe es mir angeschaut.

Ist in Ordnung. Hat sich von meiner Seite erledigt.

Zitat:

Zitat von Uwe_B

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

Das dient nur zur Anschauung du kannst es aber auch Groß und Klein schieben.

______________
MfG Roland

Manfred62 · #12 (**permalink**) 26.03.2015, 10:11

kann man das nicht so lösen?
einfache Demo:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: 100%/1.5 sans-serif;
		padding: 1em;
	}
	figure {
		border: 1px solid #cdc0b0; 
		border-radius: 4px; 
		padding: 10px; 
		margin-bottom: 15px;
	}
	img {
		float: left; 
		margin-right: 10px;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	@media only screen and (max-width: 450px) {
		figure {
			text-align: center;
		}
		img {
			float: none;
			margin: 0;
			/*width: 100%;*/
		}
		figcaption {
			float: left;
			text-align: left;
		}
	}
	</style>
</head>
<body>
	<figure class="cf">
		<img src="http://placehold.it/200x150/0eafff/ffffff.png" alt=""/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repudiandae magni deserunt amet accusamus fuga minus quo, ullam, quia alias, hic earum? Rerum sint maiores quisquam ullam illum non autem. Nisi adipisci provident incidunt unde ipsa consectetur laudantium natus repellat ut, optio fuga suscipit vitae expedita fugiat, praesentium porro ab quibusdam itaque placeat quos tempore harum, obcaecati deserunt!</figcaption>
	</figure>
</body>
</html>

K.Roland · #13 (**permalink**) 26.03.2015, 15:04

Zitat:

Zitat von Manfred62

kann man das nicht so lösen?

Hallo Manfred62

So wie du zeigst, wollte er es am anfang.
So hatte ich es auch verstanden.

Ich denke es soll auch ohne Media Queries funktionieren.

Er hat es nun wieder so mit overflow: auto; und min-width: 200px; gelöst.

Damit es sich unter dem Bild platziert wen erst die Mindestweite erreicht ist.

___________
MfG Roland

Uwe_B · #14 (**permalink**) 31.03.2015, 16:59

Danke für die Anregungen, ich werde dann wohl mit @media arbeiten.

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