Frage von abbrechen, 33

container Höhe trotz margin und padding automatisieren?

Hi,

meine Achillesferse ist das automatische Anpassen der Höhen äußerer Container. Setze ich ohne margin und padding Inhalte in einen äußeren Container, passt sich die Höhe des Containers des Inhaltes an - soweit so gut. Ab jetzt werde ich etwas ratlos. Natürlich kann man Pixel und Prozente nicht mischen, aber manchmal muss man mit beiden Angaben arbeiten. Inhalte nehmen z.B. 50% der Breite ein, die Abstände sollen aber wie im Grid designed einen 12px gutter haben. Dazu soll der Innenabstand 50px haben. Beim Einfügen der Abstände zerreißt die optische Struktur. Mein Beispiel: http://codepen.io/anon/pen/wzZPxQ . Entfernt ihr den padding- und margin-Wert ist alles gut, sobald diese Abstände aber dabei sind, spielt die Höhe des äußeren Containers keine Rolle mehr. Und das ist es, was ich versuche. Den Inhalt der (in diesem Beispiel genannten) .box auch komplett drinnen zu haben, so dass die Höhe von .box sich anpasst, wenn Abstände hinzu kommen.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von medmonk, 13

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

.box {
  display: flex;
}

LG medmonk 

Kommentar von abbrechen ,

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

Kommentar von medmonk ,

Das Flex-Boxmodel ist schon ne feine Sache und vieles erleichtert. Kurz um »It's magic what CSS can do« ;) 

Antwort
von tDoni, 18

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!


Kommentar von abbrechen ,

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. =)

Kommentar von tDoni ,

Ich setze auch nicht gerne auf (fremde) Frameworks aber das Grid-System habe ich dennoch in angepasster Version in den meisten Projekten im Einsatz.

Mit Scss, sass oder less habe ich noch nicht gearbeitet, daher war mir das bislang unbekannt.

Dein neuer Link führt zur 404, kann ich mir leider nicht näher ansehen. Vielleicht hilft dir ein

box-sizing: border-box;

um das mit dem Margin in den Griff zu bekommen.

Ich kenne dein Vorhaben nicht genau, du könntest es aber vielleicht auch über display:table in den Griff bekommen. Nicht die schönste Art aber es kann u.U. zum Ziel führen.

Flex-Box wäre vielleicht noch eine Alternative: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (ich habe mich darin noch nicht eingearbeitet, wenn ich gerade Mist erzähle, oder es dir nicht weiter hilft, einfach ignorieren ;) )

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten