zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drei responsive Boxen / DIVs zentriert nebeneinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.04.2015, 19:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2013
Beiträge: 8
marvinski03 befindet sich auf einem aufstrebenden Ast
Rotes Gesicht Drei responsive Boxen / DIVs zentriert nebeneinander

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
Angehängte Grafiken
Dateityp: jpg three-responsive-divs.jpg (221,8 KB, 12x aufgerufen)

Geändert von marvinski03 (12.04.2015 um 19:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.04.2015, 21:32
Benutzerbild von Manfred62
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

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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2015, 00:21
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von marvinski03 Beitrag anzeigen
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


.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (13.04.2015 um 00:27 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 13.04.2015, 17:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2013
Beiträge: 8
marvinski03 befindet sich auf einem aufstrebenden Ast
Daumen hoch Funktioniert super!

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
Mit Zitat antworten
  #5 (permalink)  
Alt 14.04.2015, 18:23
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Was ist geschehen mit:
Zitat:
Zitat von marvinski03 Beitrag anzeigen
... 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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.04.2015, 19:32
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Toro Beitrag anzeigen
... 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/
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Stichwörter
divs, nebeneinander, responsive, zentriert

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 divs nebeneinander zentriert xFezzy CSS 1 06.02.2015 18:41
2 DIVs nebeneinander ganzheitlich zentriert SchlechterInformatiker CSS 2 12.11.2009 03:29
3 divs zentriert nebeneinander StefanE CSS 1 04.03.2009 12:25
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32
3 Boxen nebeneinander im Browser zentriert. franz CSS 5 15.01.2006 21:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:11 Uhr.