Zum Glück gibt es ein CSS-Konstrukt, das hier Abhilfe schafft und inzwischen auch vom Großteil der Browser unterstützt wird. Show
Gemeint ist das flexbox-Modell (hier geht es zum Standard). Dies ist eine Layout-Methode, die Boxen innerhalb eines Containers effizient verteilen und ausrichten kann, auch wenn die Größen unterschiedlich/unbekannt sind. Die Grundidee ist, dass Boxen innerhalb eines Containers anhand einer Achse ausgerichtet und verteilt werden. Dies kann dann mit entsprechenden Direktiven genauer gesteuert werden. Allerdings soll dies jetzt keine komplette Einführung sein, sondern nur ein Beispiel, wie man das obige Problem mit Hilfe des Flexbox-Modus lösen kann. Dazu brauchen wir zunächst einen Container und die Boxen dann innerhalb des Containers: Als nächstes muss das CSS eigentlich nur noch um die entsprechenden Flex-Direktiven erweitert werden: <style> #flex-container { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .panel-test2 { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 30%; padding: 20px; float: left; margin: 10px; border: 1px solid #aaa; } </style>Wie man sieht, wird hier das Flex-Layout mit display: flex sowohl für den Container als auch die Child-Elemente eingeschaltet. Dies führt schon automatisch dazu, dass alle Boxen die gleiche Höhe bekommen. Die Höhe ist dabei die des größten Elements. Allerdings würden dann alle Boxen in einer Zeile erscheinen und entsprechend schmaler werden. D.h. die definierte Breite würde ignoriert werden. Damit stattdessen die vordefinierte Breite von 30% genutzt wird, wird flex-wrap: wrap eingesetzt. Dies sagt dem Container, dass "überschüssige" Boxen in die nächste Zeile rutschen sollen. Das Ergebnis sieht dann so aus: Dies ist eine Test-Headline, die ein bisschen länger ist, da sie viel Text enthält
Dies ist kurze HeadlineDies ist eine Test-Headline, die ein bisschen länger ist, da sie viel Text enthältDies ist eine Test-Headline, die ein bisschen länger ist, da sie viel Text enthältDies ist eine Test-Headline, die ein bisschen länger ist, da sie viel Text enthältWas bewirkt Display Flex?display: flex gibt allen Flexboxen in einer Zeile dieselbe Höhe und nimmt uns so nebenbei die Berechnungen für den Platz zwischen den Boxen ab. Mit space-around und space-between wird der freie Raum zwischen den Flexboxen verteilt. Die Reihenfolge der Elemente einer Flexbox kann durch order beliebig festgelegt werden.
Was macht Flex in CSS?display:flex stellt alle direkten Nachkommen eines Elements in Zeilen oder Spalten dar. Die Nachkommen müssen nicht einmal vom selben Typ sein. Der Flex-Container passt ohne weitere Angaben die Breite seiner Nachkommen an den Inhalt an. Alle Elemente in einer Reihe bekommen dieselbe Höhe.
Wie funktioniert DIV HTML?div in HTML: Alles Wichtige zur Verwendung des div-Containers. Mit dem div-Tag werden Inhalte in HTML aufgeteilt und abgetrennt. Da der div-Container keinerlei eigene semantische Bedeutung hat, wird sein Einsatz nur dann empfohlen, wenn andere Elemente nicht verwendet werden können.
Für was steht DIV HTML?Das div-Element gruppierendes Element ohne semantische Bedeutung. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können.
|
Css div nebeneinander gleiche höhe
zusammenhängende Posts
Urheberrechte © © 2024 paraquee Inc.
