Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 12.01.2014, 18:20
Benutzerbild von Manfred62
Manfred62 Manfred62 ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

das sollte mit media-queries gehen. Einfaches Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/* PocketGrid, http://arnaudleray.github.io/pocketgrid/ */
	.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.block-group {
		*zoom: 1;
	}
	.block-group:before, .block-group:after {
		display: table;
		content: "";
		line-height: 0;
	}
	.block-group:after {
		clear: both;
	}
	.block-group {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.block-group > .block-group {
		clear: none;
		float: left;
		margin: 0 !important;
	}
	.block {
		float: left;
		width: 100%;
	}
	/* ------ */
	* {
		margin: 0;
		padding: 0;
		font: 100%/1.5 sans-serif;
	}
	.main {
		max-width: 960px;
		margin: 0 auto;
		border: 1px solid #ccc;
	}
	.wrap {
		width: 50%;
	}
	.img {
		width: 50%;
	}
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	.img, p {
		padding: 1em;
	}
	@media only screen and (max-width: 700px) {
		.wrap {width: 100%;}
	}
	</style>
</head>
<body>
	<div class="main block-group">
		<div class="wrap block">
			<div class="img block"><img src="http://placehold.it/300x100/0eafff/ffffff.png" alt=""></div>
			<div class="img block"><img src="http://placehold.it/300x100/0eafff/ffffff.png" alt=""></div>
		</div>
		<div class="wrap block">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
		</div>
	</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links