HTML/CSS Contentboxen in einem Wrapper

07/03/2018 20:36 Goku.#1
Hey,

wie bekomme ich das hin, dass ich durch eine Klasse/ID drei Contentboxen in einem Wrapper habe, wie im Beispiel zu sehen ist.

[Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]
07/03/2018 23:45 Fydes#2
Hallo,

ich würde es so machen.
[Only registered and activated users can see links. Click Here To Register...]

LG
07/04/2018 00:51 krankheit#3
Ich habe es soweit bekommen : [Only registered and activated users can see links. Click Here To Register...]
Mich können andere gerne korrigieren bin auch erst neu in der Materie :)
07/04/2018 10:25 type.#4
Gib lieber deinem Body einen margin-top (statt dem Wrapper ein Padding zu verpassen), dann bekommst du auf jeden Fall keine Probleme, wenn sich das Layout mal ändern sollte. (:
Ansonsten sieht das für mich nach einer Aufgabe für Grid aus.
Bietet eine einfache Lösung und ist auch wieder flexibel genug um Änderungen einfach einpflegen zu können.
Code:
.wrapper {
	
	display: grid; grid-gap: 50px; grid-auto-flow: row;
	grid-template: 600px / repeat( 2, 400px );
	
	padding: 50px;
	width: 950px; height: 1300px;
	
}

#long { grid-column: span 2; }
Beispiel: [Only registered and activated users can see links. Click Here To Register...]
Und zum Lernen: [Only registered and activated users can see links. Click Here To Register...]

Ich hoffe, das hilft dir weiter. ^—^
07/05/2018 16:32 Yasunai#5
Quote:
Originally Posted by type. View Post
Gib lieber deinem Body einen margin-top (statt dem Wrapper ein Padding zu verpassen), dann bekommst du auf jeden Fall keine Probleme, wenn sich das Layout mal ändern sollte. (:
Ansonsten sieht das für mich nach einer Aufgabe für Grid aus.
Bietet eine einfache Lösung und ist auch wieder flexibel genug um Änderungen einfach einpflegen zu können.
Code:
.wrapper {
	
	display: grid; grid-gap: 50px; grid-auto-flow: row;
	grid-template: 600px / repeat( 2, 400px );
	
	padding: 50px;
	width: 950px; height: 1300px;
	
}

#long { grid-column: span 2; }
Beispiel: [Only registered and activated users can see links. Click Here To Register...]
Und zum Lernen: [Only registered and activated users can see links. Click Here To Register...]

Ich hoffe, das hilft dir weiter. ^—^
Ja entweder so, oder, falls du es etwas schöner möchtest, mit Flex-Boxen.
Hier mal ein Beispiel
Code:
#wrapper
{
	display: flex;
	justify-content: flex-start| flex-end | center | space-between | space-around | space-evenly;
	flex-wrap: wrap | no-wrap | wrap-reverse;
}
Hier gibt's noch mal Lesefutter: [Only registered and activated users can see links. Click Here To Register...]

Vorteil daran ist, dass wenn du den Wrapper später mit prozentualer Größe nimmst, sich der Inhalt automatisch einrückt etc.
Nachteil: Du hast kein Grid, das sich so exakt an das Konstrukt anpasst.
07/05/2018 16:48 type.#6
Quote:
Originally Posted by Yasunai View Post
[…] falls du es etwas schöner möchtest, mit Flex-Boxen.
Naja… Flexbox hat m.M.n. auch den Nachteil, dass es eigentlich darauf ausgelegt ist eindimensional zu funktionieren. Klar, man kann da auch ohne Probleme mit flex-wrap was zaubern, aber Grid ist eben von Natur aus zweidimensional.
Ich denke aber, dass hier einfach auch die Vorlieben des Coders einen großen Einfluss haben. Fakt ist, dass theoretisch beide Lösungsansätze funktionieren. (:

Quote:
Originally Posted by Yasunai View Post
Vorteil daran ist, dass wenn du den Wrapper später mit prozentualer Größe nimmst, sich der Inhalt automatisch einrückt etc.
Nachteil: Du hast kein Grid, das sich so exakt an das Konstrukt anpasst.
Naja, man könnte das Grid auch einfach mit Prozentangaben definieren bzw. mit fr-units. Dann passt es sich auch an, wenn der Wrapper sich verändert. :b
07/05/2018 18:02 Yasunai#7
Quote:
Originally Posted by type. View Post
Naja… Flexbox hat m.M.n. auch den Nachteil, dass es eigentlich darauf ausgelegt ist eindimensional zu funktionieren. Klar, man kann da auch ohne Probleme mit flex-wrap was zaubern, aber Grid ist eben von Natur aus zweidimensional.
Ich denke aber, dass hier einfach auch die Vorlieben des Coders einen großen Einfluss haben. Fakt ist, dass theoretisch beide Lösungsansätze funktionieren. (:
Das stimmt, aber man könnte sie auch noch kombinieren.

Quote:
Originally Posted by type. View Post
Naja, man könnte das Grid auch einfach mit Prozentangaben definieren bzw. mit fr-units. Dann passt es sich auch an, wenn der Wrapper sich verändert. :b
Dann ja, aber es war auf dein Snippet bezogen :)