Dynamische Zeilen von divs (Boxen) mit CSS?
Ich habe eine variable Anzahl von Kästchen und möchte so viele anzeigen, wie ich kann, ohne den Betrachter dazu zu zwingen, horizontal zu scrollen, es sollte auch ein gewisser Abstand dazwischen sein. Das bedeutet, dass die Kästchen in die nächste oder vorherige "Zeile" verschoben werden müssen, wenn die Größe des Browsers geändert wird.
Wie erreiche ich das mit divs und CSS?
Vielen Dank im Voraus: -)
P.S: Genießen Sie meine Fähigkeiten in der Kunst:
2 Antworten
Sie müssen nur die Breite und / oder Höhe der roten Divs als "Prozentsatz" einstellen und Ihre kleinen schwarzen Divs float: left einstellen.
Beispiel:
%Vor%Damit ändert sich die Größe des roten Ausschnitts, sobald der Betrachter die Größe des Fensters ändert. & gt;
Scaryguy ist die Antwort ziemlich richtig. Aber das äußere div sollte overflow: hidden haben, damit der conteiner richtig funktioniert.
Siehe dieses Beispiel: Ссылка
Der Code im Beispiel enthält alle roten Felder mit float: left . Und es gibt 4 blaue divs, die enthalten (die ersten 2 blauen divs sind oben zusammen):
- Keine klare und keine Float, und hat 3 rote Divs innerhalb
- Keine klare und keine Float, und hat 3 rote Divs innerhalb
- Hat
clear: leftund 5 rote divs innerhalb von - Hat
overflow: hiddenund 5 rote divs innerhalb von
Beachten Sie, dass, ohne clear, float und overflow: hidden auf dem Container, Ihre roten divs auf Container 1 und 2 nebeneinander liegen (nicht nach dem Container).
Sie können sehen, dass für das blaue div des Containers, um seine korrekte vertikale Größe zu erhalten, overflow: hidden (oder vielleicht auch float ) verwendet werden muss.