zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs sollen ineinander rutschen (wenn Platz)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.12.2011, 15:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 65
Berliner befindet sich auf einem aufstrebenden Ast
Frage DIVs sollen ineinander rutschen (wenn Platz)

Hallo Freunde,

ich habe mehrere DIV-Container (mit Bildern) die in der Höhe dynamisch sind. Die Anzahl der DIV-Container (Bilder) variiert auch bzw. ist nicht bekannt. Wie kann man mit CSS erreichen, dass die DIVs, wie auf folgendem Screenshot, "ineinander rutschen".

Mit float:left funktioniert das leider nicht.



Danke schonmal und schöne Grüße
Matthias
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.12.2011, 16:19
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

So wie du dir das vorstellst ist es derzeit nicht möglich.

Du kannst entweder display: inline-block; verwenden und die Elemente dann mit vertical-align an der Oberkante ausrichten, dann fließen die Elemente von links nach rechts und haben je nach Größe nach unten hin etwas Freiraum,

oder du verwendest CSS3 Multi-Column Layout (column-count, column-width, etc). Dann fließen deine Elemente von oben nach unten. Die Implementierung dieser Eigenschaften ist jedoch nicht ganz so weit verbreitet.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.12.2011, 16:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 65
Berliner befindet sich auf einem aufstrebenden Ast
Standard

Hallo Gato,

vielen Dank für die Hilfe. Mit display: inline-block und vertical-align:top funktioniert das leider nicht. Das sieht dann so aus.


Mit Spalten (Multi-Column Layout) kann ich leider auch nicht arbeiten da ich nicht weiß wie ich die Bilder/Divs in die Spalten bekommen soll denn die Anzahl der DIVs ist vorher nicht bekannt und variiert.

Bei diesem Beispiel wird jedem DIV eine Position und top:0px left:233px zugeteilt. Weißt Du zufällig wie man soetwas macht? Wäre da vielleicht jQuery eine Möglichkeit (irgendwie)?

Grübel!

Gruß Matthias
Mit Zitat antworten
  #4 (permalink)  
Alt 10.12.2011, 16:44
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Berliner Beitrag anzeigen
vielen Dank für die Hilfe. Mit display: inline-block und vertical-align:top funktioniert das leider nicht. Das sieht dann so aus.
Ja, es funktioniert so, wie ich es beschrieben habe.

Zitat:
Zitat von Berliner Beitrag anzeigen
Mit Spalten (Multi-Column Layout) kann ich leider auch nicht arbeiten da ich nicht weiß wie ich die Bilder/Divs in die Spalten bekommen soll denn die Anzahl der DIVs ist vorher nicht bekannt und variiert.
Es ist egal, wie viele div/img-Elemente du hast. Fasse sie in einem Elternelement (z.B. div) zusammen und gib diesem Element column-count: 3;

Zitat:
Zitat von Berliner Beitrag anzeigen
Bei diesem Beispiel wird jedem DIV eine Position und top:0px left:233px zugeteilt. Weißt Du zufällig wie man soetwas macht? Wäre da vielleicht jQuery eine Möglichkeit (irgendwie)?
Hier ist auf jedenfall eine Art von Skript im Hintergrund aktiv. Ob und wenn welche Bibliothek dafür eine spezielle Schnittstelle bereitstellt kann ich dir leider nicht sagen.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.12.2011, 16:54
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hmm, vielleicht geht das mit masonry?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.12.2011, 16:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 65
Berliner befindet sich auf einem aufstrebenden Ast
Standard

@Mafred
Das sieht seeeehr gut aus. Das schaue ich mir gleich mal an. Vielen Dank

column-count: 3 funzt bei mir leider nicht. FF filtert diese css-anweisung heraus - in Firebug ist sie ständig verschwunden. kA warum.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.12.2011, 17:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 65
Berliner befindet sich auf einem aufstrebenden Ast
Standard

Der Tip mit "masonry" war Gold wert. Damit klappt es wunderbar.

Problem erledigt!

Herzlichen Dank an alle!
Mit Zitat antworten
  #8 (permalink)  
Alt 10.12.2011, 17:24
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Berliner Beitrag anzeigen
column-count: 3 funzt bei mir leider nicht. FF filtert diese css-anweisung heraus - in Firebug ist sie ständig verschwunden. kA warum.
Firefox unterstützt diese Eigenschaften momentan nur mit -moz-Präfix. Das wäre aber mit Hilfe meines Hinweises nicht schwer herauszufinden gewesen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
Liquid Design: Wenn divs im IE untereinander rutschen heiko_rs CSS 17 26.10.2010 19:22
Div's ineinander, einer davon fixiert Marc2006 CSS 0 11.12.2009 23:33
divs rutschen untereinander wirdnix CSS 3 22.04.2009 19:30
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 06:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:39 Uhr.