DIV splitten

[Charkens]

Hallo zusammen,

ich bin auf der Suche nach einem Script, dass DIVs mit fester Breite aufsplitten kann.
Um das Problem besser beschreiben, habe ich hier folgende Grafik hinterlegt:
http://www.mfries.de/resizer.gif

Im ersten Bild sind mehrere DIVs jeweils mit fester Breite gefloatet. Bei einem Resize des Browser würden die DIVs in die nächste Zeile springen (siehe Bild 2). Wie ist es aber möglich, die DIVs aufzusplitten und über zwei oder mehr Zeilen zu erstrecken (siehe Bild 3). Wichtig dabei ist, dass die feste Breite beibehalten wird und sich in der Größe nichts ändert. Das Ganze arbeitet bildschirmfüllend und orientiert sich dauerhaft an der Browsergröße.

Danke für Eure Hilfe!!!

[M.]

Mahlzeit,

Wie ist es aber möglich, die DIVs aufzusplitten und über zwei oder mehr Zeilen zu erstrecken (siehe Bild 3).

Kurz: gar nicht.
Lang: Du könntest höchstens dein erstes Div bis zum rechten Rand laufen lassen, dann berechnest du, um wieviel es kürzer als das eigentliche div ist und erzeugst für die nächste Zeile ein div, dass die passende Breite hat.

Irrsinniger Aufwand. Bist du sicher, dass dein Problem keine sinnvollere Lösung haben könnte?

[Der Martin]

Hi,

Lang: Du könntest höchstens dein erstes Div bis zum rechten Rand laufen lassen, dann berechnest du, um wieviel es kürzer als das eigentliche div ist und erzeugst für die nächste Zeile ein div, dass die passende Breite hat.

... oder man verabschiedet sich von Blockelementen, denn das gewünschte beschriebene Verhalten entspricht eigentlich genau dem von inline-Elementen: Sie brechen am rechten Rand des Elternelements um und gehen in der nächsten Zeile weiter. Dann bräuchte man kein unterstützendes Script, weil das nur das normale Verhalten der Elemente wäre.

Ob das eine Lösung sein könnte, hängt natürlich sehr vom Inhalt dieser Containerelemente ab: Eignet der sich dafür, über Zeilengrenzen getrennt zu werden? IMO ist das nur bei Fließtext oder fließtextähnlichen Inhalten (z.B. einer Folge von Symbolen oder Bildern) sinnvoll.

Ciao,
 Martin

[Charkens]

... oder man verabschiedet sich von Blockelementen, denn das gewünschte beschriebene Verhalten entspricht eigentlich genau dem von inline-Elementen: Sie brechen am rechten Rand des Elternelements um und gehen in der nächsten Zeile weiter. Dann bräuchte man kein unterstützendes Script, weil das nur das normale Verhalten der Elemente wäre.

Leider funktioniert das mit den inline-Elementen nicht. Sobald auch diese eine fixe Breite haben, wird kein Umbruch erzeugt. Die Inhalte der Container sind tatsächlich einfach nur Flächen, die bei zu kleiner Browsergröße ihre Zeile bis zum Bildschirmrand ausfüllen und in der nächsten Zeile fortgeführt werden. Dabei wird deren Breite beibehalten.
Ich glaub, ich komme um ein Script nicht herum … kennt ihr ein Script/Plugin, dass die Inhalte berechnet und in der nächsten Zeile fortführt? Dieses Auffüllen von Weißraum ähnelt eigentlich Masonry …, das hilft allerdings auch nicht weiter, weil die Reihenfolge der Elemente zerschossen wird.

Danke nochmals!

[Der Martin]

Moin,

... oder man verabschiedet sich von Blockelementen, denn das gewünschte beschriebene Verhalten entspricht eigentlich genau dem von inline-Elementen: Sie brechen am rechten Rand des Elternelements um und gehen in der nächsten Zeile weiter. Dann bräuchte man kein unterstützendes Script, weil das nur das normale Verhalten der Elemente wäre.
Leider funktioniert das mit den inline-Elementen nicht. Sobald auch diese eine fixe Breite haben, wird kein Umbruch erzeugt.

das kann man so nicht sagen. Denn inline-Elemente (im Sinn von CSS) ignorieren eine width-Angabe. Damit width überhaupt wirken kann, müssen sie zumindest inline-block sein - und dann stimmt deine Aussage, dass sie nicht umbrechen.

Ich hatte aber angenommen, die Breite würde sich durch den Inhalt ergeben.

Die Inhalte der Container sind tatsächlich einfach nur Flächen, ...

Also haben deine div-Container technisch betrachtet gar keinen Inhalt?

Dann könnte ich mir zumindest eine Behelfslösung vorstellen. Nimm zunächst span-Elemente als Container (dann ergibt sich das mit dem Umbruch passend) und weise ihnen keine Breite zu. Fülle sie entsprechend der gewünschten Breite mit weiteren spans, die alle als inline-block formatiert sind und eine feste, immer gleiche Breite haben (z.B. 10px oder 0.25em oder etwas in der Art).
So hättest du den gewünschten Effekt, nur eben nicht pixelfein, sondern mit einer gewissen Körnigkeit. Wenn du damit leben kannst ...

Schönes Wochenende,
 Martin