Hallo!
Die Grundstruktur ist einfach:
<div style="display: table">
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<!-- … -->
</div>
> >
> > Da findet kein Umbruch statt, wenn ich die Seite kleiner mache...
>
> Von alleine sicher nicht.
> Du musst Media Queries nutzen und dann bspw. bei geringerer Viewportbreite statt 'display: table-cell' dann 'display: table-row' verwenden.
Naja, abgesehen davon, dass Media Queries CSS3 sind und dass sie eigentlich für etwas anderes gedacht sind, ist die Lösung (wenn sie denn auch für einen PC Browser funktioniert) schonmal wesentlich besser als display:table. Das kommt auch schon relativ nah an das heran, was ich mir für CSS Wünsche, nämlich die möglichkeit damit zu programmieren. Muss nicht turing vollständig sein, aber simple Bedingungen oder Schleifen usw. muss einfach sein. Und einen parent-Selektor. Gibt es den eigentlich mittlerweile oder heißt es von den Browserherstellern immernoch "zu rechenintensiv"?
> Übrigens müsstest du eigentlich ein Fan hiervon sein. Denn anders als bei der Float-Variante, kann hier tatsächlich die Container-Elemente im HTML Code weglassen. Diese fügt der Browser nämlich dann selbständig als anonyme Boxen ein.
Ja richtig. Wenn diese dann nicht im HTML vorhanden sind (und auch nicht dynamisch hinzugefügt werden) dann ist diese Lösung bezüglich des HTMLs super. Danke auf jedenfall.
> Nachteil: Du kannst diese nicht per CSS selektieren und somit auch nicht formatieren.
Das ist kein Nachteil, sondern ein Vorteil. Wenn ich sie (nicht einzeln) selektieren will, dann muss es dafür einen Grund geben, z.B. weil sie sich eine bestimmte Eigenschaft oder ein Verhalten teilen (sollen). Das lege ich dann, wenn es so sein sollte, durch CSS Klassen fest. Oder ggf. sogar durch einen Container. Hängt dann vom Grund ab.