container Höhe trotz margin und padding automatisieren?

... komplette Frage anzeigen

2 Antworten

Gib der äußeren Box ein display: flex und der Drops ist gelutscht. ;)

.box {
  display: flex;
}

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von abbrechen
29.09.2016, 19:44

Geile Sache, danke. :D
Hatte flex bisher nur stumpf und ohne weiter über die value nachzudenken für Flexboxen benutzt.

0

Du definierst innerhalb deiner CSS-Klasse .box die Klasse .innerbox (&.innerbox:last-child). ich wusste gar nicht, dass das so möglich ist. Das habe ich noch nie so gesehen.

Was vermutlich dein Problem auslöst ist das

float: left;

Gib den Container noch die Klasse clearfix mit. Ich vermute, das ist das, was du erreichen willst.

Schau dir dazu mal diese Seite an: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float

Du kannst dir auch einmal Bootstrap ansehen. Das Grid-System ist echt gut und arbeitet auch mit floats: http://getbootstrap.com/ bzw http://holdirbootstrap.de/.

Tipp: Schau dir das CSS zum Grid-System davon an!


Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von abbrechen
28.09.2016, 14:50

Ich definiere innerhalb meiner Klasse box die .innerbox, weil ich Scss benutzt habe, wo es möglich ist. Ebenso in sass und less.

Du hast recht, das float ist der Übeltäter. o.O Ohne das float passt sich zwar wie gewollt die Höhe mit den Abständen an, aber das float brauche ich doch, damit die (in diesem Fall) div-Container, .innerbox, doch überhaupt ... floaten. In diesem Fall halt in einer Reihe stehen. Bei einer Galerie, dass sie sich bis zum Schluss so verhält. 

Der clearfix hat leider nichts bewirkt.

Allerdings habe ich mir die selfhtml-Seite angeschaut und eine Lösung für das padding gefunden: overflow. Ich habe der .box overflow: auto gegeben (lustigerweise hat es auch mit hidden geklappt) und die Höhe hat sich angepasst. 

Nur leider klappt das mit dem margin noch nicht so richtig. Da ich mit den 12px margin-right insgesamt die 100% überschreite, wird die zweite .innerbox in die nächste Zeile geworfen. 

Hier das Update: http://codepen.io/anon/pen/jrwYgB 


ps. Ja, Bootstrap ist nett, aber ich arbeite meistens lieber ohne Frameworks. Denn noch danke. =)

0

Was möchtest Du wissen?