Drei responsive Boxen / DIVs zentriert nebeneinander

marvinski03 · #1 (**permalink**) 12.04.2015, 18:52

Hallo ihr Lieben,

ich stehe gerade total auf dem Schlauch.
Geplant war drei Boxen mit etwas Außen- oder Innenabstand nebeneinander auf die Seite zu setzen. Diese sollen sich dann responsive verhalten.
Die Boxen dürfen sich sich solange verkleinern bis sie ihre mindestbreite von 250px erreicht haben.

In diesem Fall soll dann die erste Box in die nächste Zeile rutschen und die oberen beide wieder 100% der Seitenbreite ausfüllen.

Ich habe mal versucht das grafisch darzustellen, weil das schriftlich schwer zu erklären ist. Wäre super, wenn mir jemand helfen kann

In der Grafik hätte ich dann mit Innenabstand, also padding gearbeitet.

Die ersten zwei Fälle sind kein Problem, aber bei Fall drei und vier hakt es immer.

aktueller Stand:

#wrapper{
width:100%;
text-align:center;
}

.boxen{
width:28%;
min-width:250px;
float:left;
margin-right:auto;
margin-left:auto;
text-align:center;
margin: 0 2%;
}

LG,

Marvin

Manfred62 · #2 (**permalink**) 12.04.2015, 20:32

kann man mit media-queries lösen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Responsive Test</title>
	<style type="text/css">
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: 100%/1.5 sans-serif;
	}
	.wrapper {
		margin: 0 auto;
	}
	.box {
		width: 100%;
		border: 3px solid red;
		padding: 1em;
		float: left;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	@media only screen and (min-width: 700px) {
		.box {
			width: 50%;
		}
		.wrapper div:nth-child(3) {
			margin: 0 auto;
			float: none;
			clear: left;
		}
	}
	@media only screen and (min-width: 900px) {
		.box {
			width: 33.3333%;
		}
		.wrapper {
			max-width: 1000px;
		}
		.wrapper div:nth-child(3) {
			float: left;
			clear: none;
		}
	}
</style>
</head>
<body>
	<div class="wrapper cf">
		<div class="box">Box 1</div>
		<div class="box">Box 2</div>
		<div class="box">Box 3</div>
	</div>
</body>
</html>

etux · #3 (**permalink**) 12.04.2015, 23:21

Zitat:

Zitat von marvinski03

aktueller Stand:

#wrapper{
width:100%;
text-align:center;
}

.boxen{
width:28%;
min-width:250px;
float:left;
margin-right:auto;
margin-left:auto;
text-align:center;
margin: 0 2%;
}

Ein „text-align: center“ (bei #wrapper) auf die Boxen ist eine sehr gute Idee. Dann solltest Du aber die Boxen selbst mit „display: inline-block“ formatieren.
Float müsste dann natürlich weg – durch Float werden selbst Inline-Elementen zu Block-Elementen.
Die Kombination von Float und „margin: auto“ ist dagegen nichts als Unfug.

Code:

#wrapper {
	text-align: center;
}
.boxen {
	display: inline-block;
	width: 28%;
	min-width: 250px;
	margin: 0 2%;
	text-align: left;
}

Das dürfte reichen, um ohne Media Queries auszukommen

.

marvinski03 · #4 (**permalink**) 13.04.2015, 16:59

Habe beide Varianten getestet und beide funktionieren super!
Vielen lieben Dank für die schnellen Antworten und die super Hilfe

Wünsche Euch eine schöne sonnige Woche!

LG,

Marvin

Toro · #5 (**permalink**) 14.04.2015, 17:23

Was ist geschehen mit:

Zitat:

Zitat von marvinski03

... soll dann die erste Box in die nächste Zeile rutschen und die oberen beide wieder 100% der Seitenbreite ausfüllen ...

Das ist zwar auf dem Bild dazu nicht eingetragen wo bei kleiner screen die erste box sein soll, aber ich verstehe darunter dass die erste box halt nach unten soll. Hab das mal probiert, dann haben die boxen aber fixed height. Edit fiddle - JSFiddle

etux · #6 (**permalink**) 14.04.2015, 18:32

Zitat:

Zitat von Toro

... Hab das mal probiert, dann haben die boxen aber fixed height.

Das ginge auch ohne feste Höhe, wenn nach dem Wrapper nichts mehr kommt – sonst wird es allein mit CSS schwierig bis unmöglich.
Hier hatte ich zu einer Forum-Frage, ein Beispiel erstellt, wie zwei Elemente ihre Reihenfolge tauschen:

Link: tests.emil-webdesign.net/inhalt-zuerst/

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
3 divs nebeneinander zentriert	xFezzy	CSS	1	06.02.2015 17:41
2 DIVs nebeneinander ganzheitlich zentriert	SchlechterInformatiker	CSS	2	12.11.2009 02:29
3 divs zentriert nebeneinander	StefanE	CSS	1	04.03.2009 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
3 Boxen nebeneinander im Browser zentriert.	franz	CSS	5	15.01.2006 20:19