Ein Hello an alle Experten.

ich habe ein paar divs, die jeweils ein Bild und ein bisschen Text enthalten. Diese werden schön wie ein Raster nebeneinander und untereinander (sobald die Breite des Browserfensters nicht mehr ausreicht) angezeigt. Das ist schön und gut alles, solange die Bilder innerhalb der divs alle gleich groß sind, denn dann sind die divs selbst auch gleich groß. Sind aber die Bilder größer (höher), dann lässt die reihe unter der mit dem großen Bild Freiräume. Ich mag aber, daß die abstände weiterhin eingehalten werden, insbesondere die vertikalen.

Und weil das so blöd zu erklären ist gibts ein beispielbild von der Ist-Situation:



und eins von der wünschenswerten Soll-Situation:



Weiß da einer was?

Schon mal bei Zalando, Amazon oder eBay geguckt? Vielleicht wirst du dort fündig.

das wüsst ich auch gern

solche layouts sind grad sehr in mode... also einfach irgendwo abgucken. zb hier:

http://www.typeneu.com ()
http://www.hort.org.uk ()

das sind aber alles tabellen… wir wollen ja divs

und wahrscheinlich mit javascript, so langsam wie die typeneu-seite auf resize reagiert

jo, js stinkt. habe diese lösung aber schon so oft gesehen, daß man annehmen könnte, daß es keine andere gibt.

und zu den tabellen... scheiss drauf! dieses qualitätsmerkmal ist schon lange veraltet.

geht nur wenn du spalten hast, also divs vertical nebeneinander in denen die einzelnen bilder untereinander drin sind. ansonsten in der form nicht lösbar, dank der standard float regeln.

(dein erstes beispiel der „ist“ situation funktioniert ja so auch nicht, stimmts? )

4 bereich, die je links floaten und dann in jedem bereich nochmal zwei divs einfach untereinander?

kasn schrieb am 30.11.08, 23:25 Uhr:

4 bereich, die je links floaten und dann in jedem bereich nochmal zwei divs einfach untereinander?

die beispielbilder da zeigen nur eine beispielsituation. es sind also nicht nur die dort sichtbaren elemente vorhanden sondern es können beliebig viele hinzukommen.

son mist, daß es da nix von ratiopharm gibt...

mensch ist das kompli.

geht so ein java script auch mit divs oder brauch ich tables?

für die gewünschten elemente nebeneinander brauchst du definitiv spalten (wie andere schon sagten). für die spalten kannste aber vermutlich eine einheitliche klasse nehmen (breite in % oder wasde eben brauchst). für die elemente darin zählt vermutlich nur die gleiche breite. die höhe ergibt sich aus dem inhalt. also auch nur eine klasse.
wozu du meinst javascript zu brauchen erschließt sich mir nicht, aber jeder fängt mal an.

na weil es sonst nicht geht
hast du sein beispiel angeschaut?

keine lösung für dein problem, aber vielleicht eine alternative, die zu deinem vorhaben eventuell passt: feste höhen vergeben und „overflow“ auf „auto“. dann haste bei zu hohen inhalten nen scrollbalken. wenns nicht zuviele sind, erträglicher als die js-lösung.

Vllt hab ich's nicht richtig verstanden, aber: http://www.lolope.de/misc/test.html

ja so geht es, klar, glaube aber der wunsch ist, dass alles ohne ein extra column div zu lösen…

es geht doch bestimmt um floatende divs:

1. .float { float: left; }
2.  
3. <div class="float"></div>
4. <div class="float"></div>
5. <div class="float"></div>
6. <div class="float"></div>
7. <div class="float"></div>

Quelltext in Zwischenablage kopieren

und der inhalt ist unterschiedlich hoch.

Hans schrieb am 01.12.08, 12:56 Uhr:

na weil es sonst nicht geht
hast du sein beispiel angeschaut?

dann hat er eben pech gehabt. der einsatz von javascript für reine layoutstrukturen (für die es eine saubere lösung gibt) ist und

Martin R. schrieb am 01.12.08, 13:31 Uhr:

es geht doch bestimmt um floatende divs:

1. .float { float: left; }
2.  
3. <div class="float"></div>
4. <div class="float"></div>
5. <div class="float"></div>
6. <div class="float"></div>
7. <div class="float"></div>

Quelltext in Zwischenablage kopieren

und der inhalt ist unterschiedlich hoch.

bringt aber nicht das ergebnis

1. .float { float: left; }
2.  
3. <div class="float"></div>
4. <div class="float"></div>
5. <div class="float"></div>
6. <div class="float"></div>
7. <div class="float"></div>

Quelltext in Zwischenablage kopieren

=

http://img377.imageshack.us/img377/1166/...pleqt8.jpg

Das Hauptproblem ist wohl, denke ich, dass es je nach Platz eine dynamische Anzahl an Spalten geben soll und die inhalte dann entsprechend neu verteilt werden muessen

Ohne Spalten-Divs geht's halt nicht. Wenn die Seite über die ganze Fensterbreite geht - gelitten. Ansonsten das Layout auf eine feste Gesamtbreite begrenzen und dann eben eine feste Spalten-Anzahl, die dann mit den Bildern befüllt werden. Aber das ist wahrscheinlich nicht gewünscht.
Bleibt nur js, denke ich.

kasn schrieb am 01.12.08, 13:50 Uhr:

Das Hauptproblem ist wohl, denke ich, dass es je nach Platz eine dynamische Anzahl an Spalten geben soll und die inhalte dann entsprechend neu verteilt werden muessen

ja gut, dann nimmt ne serverseitige scriptsprache, die die verteilung organisiert. aber man nimmt doch kein javascript um für das layout zu sorgen

doob schrieb am 01.12.08, 14:11 Uhr:

kasn schrieb am 01.12.08, 13:50 Uhr:

Das Hauptproblem ist wohl, denke ich, dass es je nach Platz eine dynamische Anzahl an Spalten geben soll und die inhalte dann entsprechend neu verteilt werden muessen

ja gut, dann nimmt ne serverseitige scriptsprache, die die verteilung organisiert. aber man nimmt doch kein javascript um für das layout zu sorgen

wie will ich denn mit einer serverseitigen Sprache vernueftig auf Aenderungen der Fenstergroesse reagieren?

Genau fuer solche Aufgaben ist doch javascript prädestinieret.

javascript ist ne scheiss lösung, aber solange niemand eine bessere lösung kennt bleibt es die einzige lösung.

http://tmp.voy7d.com/divs-vertikal/divs-...tikal.html

Serverseitig lässt sich das mit Arrays leicht machen. Die userseitige Fenstergröße müsstest Du halt nach der Landung einmalig per JS abfragen, aber das geht schnell und unkompliziert.

wenn du per js die userseitige fenstergröße ausliest kannst du es auch gleich mit js anordnen oder nicht?

also breite auslesen und dementsprechend viele spalten erstellen/füllen, z.b. mit innerhtml, ohne javascript hat man dann eben diese leerräume.

Clu schrieb am 01.12.08, 14:21 Uhr:

http://tmp.voy7d.com/divs-vertikal/divs-...tikal.html

Das floatet ja nicht. D.h. die Seitenbreite ist in dem Layout egal und darum geht es ja hier...
.. verzwicktes Problem.