nicht angemeldet
Spalten wie in der Zeitung
moin, kann mir jemand einen Tipp geben wie ich div's so wie in einer Zeitung anordnen kann ? D.h. 2 Divs unterschiedlicher Länge nebeneinander, der dritte soll dann unter den ersten, unabhängig von der länge des zweiten Div's.
------ -------
| | | |
| | | |
------ | |
------ | |
| | -------
| |
------
also der dritte Div (zweite Zeile, erste Position) soll genau unter dem ersten (erste Zeile, erste Position) anfangen. Der vierte (nicht im Bild) soll dann genau unter dem zweiten Div ansetzen.
Die Div's haben immer untersch. Höhen.
-
Hi!
------ -------
| 1 | | 3 |
| | | |
------ | |
------ | |
| 2 | -------also der dritte Div (zweite Zeile, erste Position) soll genau unter dem ersten (erste Zeile, erste Position) anfangen. Der vierte (nicht im Bild) soll dann genau unter dem zweiten Div ansetzen.
Die Div's haben immer untersch. Höhen.Mit einem 2-Spalten Layout (siehe u.a. Grundlagen für Spaltenlayout mit CSS)
DIV 1 + 2 => linke Spalte
DIV 3 => rechte SpalteDeinem Thread-Titel nach zu urteilen, könnte man aber auch leicht annehmen, dass du CSS3 module: Multi-column layout meinst/ suchst (wovon nach dem Lesen deines Beitrags allerdings eher nicht von ausgehe).
Gruß Gunther
-
@Gunther
Naja das Problem ist, dass die Div's in der Reihenfolge (aus deinem Beispiel) 1,3,2 kommen, also theoretisch sollen immer 2 nebeneinander dargestellt werden und beim dritten der Umbruch kommen. Also ich kriege erst einen Div für links, dann für rechts, dann wieder für links ...
Wenns garnicht geht muss ich die halt zwischenspeichern...-
Hi!
Naja das Problem ist, dass die Div's in der Reihenfolge (aus deinem Beispiel) 1,3,2 kommen, also theoretisch sollen immer 2 nebeneinander dargestellt werden und beim dritten der Umbruch kommen. Also ich kriege erst einen Div für links, dann für rechts, dann wieder für links ...
OK, hier stößt du auf das Problem, dass halt auch die Reihenfolge der Elemente im Markup eine Rolle spielt, bzw. für gewisse Positionierungen halt auch eine bestimmte Reihenfolge notwendig ist.
Was heißt denn "ich kriege erst einen Div ..."? Hast du Einfluss auf den Quelltext? Oder beziehst du den fertigen HTML-Code aus einer fremden Quelle (mit deren Zustimmung)?
Wenns garnicht geht muss ich die halt zwischenspeichern...
Was meinst du damit?
Kannst du den (fremden) Quellcode auch erst bspw. in ein PHP-Script einlesen und dort entsprechend weiterverarbeiten?Ggf. ist aber auch der folgende Artikel von Gunnar Bittersmann (sehr aktiv hier im Forum) für dich von Interesse?
Gruß Gunther
-
Hi Gunther.
Den Artikel über inline-block kenne ich bereits, der passt hier aber leider nicht so ganz.
Ich lese den Inhalt für die Container aus der Datenbank, nur muss halt der zweite Datensatz der letzte in der ersten Zeile sein und der dritte Datensatz in Zeile 2 beginnen.
Im Moment habe ich es so gelöst das ich alle ungeraden/geraden Datensätze separat speicher und dann erst ausgebe.-
Hi!
Ich lese den Inhalt für die Container aus der Datenbank, nur muss halt der zweite Datensatz der letzte in der ersten Zeile sein und der dritte Datensatz in Zeile 2 beginnen.
Im Moment habe ich es so gelöst das ich alle ungeraden/geraden Datensätze separat speicher und dann erst ausgebe.Ja, wunderbar. Dann verstehe ich nicht, wo dein Problem liegt?
Und solange du kein Grid o.ä. verwendest, würde ich nicht von "Zeilen" sprechen, sondern du verteilst deine DIV-Container einfach auf die 2 Spalten deines Layouts und in jeder Spalte folgt ganz automatisch ein Container auf den anderen. Und das ganz von alleine und in Abhängigkeit ihrer jeweiligen Größe, bzw. genauer gesagt ihrer Höhe, denn die Breite dürfte ja eh bei allen gleich sein.
Gruß Gunther
-
Ich hätte mir halt nur gern den Umweg des Zwischenspeicherns gespart wenn es auch anders gegangen wäre ;)
-
Hi!
Ich hätte mir halt nur gern den Umweg des Zwischenspeicherns gespart wenn es auch anders gegangen wäre ;)
Was bitte verstehst du denn unter "Zwischenspeichern" und wie machst du das?
Du hast bis jetzt lediglich verraten, dass du die Daten aus einer Datenbank ausliest.Wenn du bspw. PHP als Scriptsprache verwendest, kannst du doch einfach die Daten in einer Variablen/ einem Array speichern. Oder du verwendest den Ausgabepuffer zum Zwischenspeichern.
Gruß Gunther
-
-
-
-
-
-
-
moin, kann mir jemand einen Tipp geben wie ich div's so wie in einer Zeitung anordnen kann ?
Ja mit
float:left; bzw. float:right;Container 1 Container 2
+-------------+ +----------------+
| +---------+ | | +------------+ |
| | | | | | | |
| | | | | | | |
| | DIV 1 | | | | DIV 3 | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| +---------+ | | | | |
| +---------+ | | | | |
| | | | | | | |
| | DIV 2 | | | +------------+ |
| | | | | |
| +---------+ | | |
+-------------+ +----------------+#div1 { position:absolute; width:100px; height:150px } #div2 { position:absolute; width:100px; height:90px } #div3 { position:absolute; width:130px; height:220px } #Container1 { float:left; } #Container2 { float:left; }Musst noch gucken und anpassen, aber so dürfe es funzen.
-
@Mike
#div1 { position:absolute; width:100px; height:150px }
#div2 { position:absolute; width:100px; height:90px }
#div3 { position:absolute; width:130px; height:220px }Warum willst du denn hier ohne Not den "natürlichen Fluss" der Elemente durch absolute Positionierung kaputt machen? Von absoluter Positionierung ist in den allermeisten Fällen abzuraten (aus o.g. Grund), es sei denn, man weiß genau wieso, weshalb , warum man sie einsetzt. Und in dem hier vorliegenden Fall sehe ich jedenfalls keinen Grund dafür. Gruß Gunther-
Heyho!
Und in dem hier vorliegenden Fall sehe ich jedenfalls keinen Grund dafür.
Ich sehe auf den ersten Blick ueberhaupt keinen Grund fuer die Definitionen der kleinen Container.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Heyho!
Und in dem hier vorliegenden Fall sehe ich jedenfalls keinen Grund dafür.
Ich sehe auf den ersten Blick ueberhaupt keinen Grund fuer die Definitionen der kleinen Container.
Ich auch nicht - aber das war und ist ja die Vorgabe des OPs für die ich mir zumindest einen Grund denken könnte. ;-)
Gruß Gunther
-
Ach ganz vergessen, die Anzahl der Container ist nicht begrenzt. Also es kann auch sein das es 10 Stück gibt und diese müssen dynamisch angelegt werden. Also geht das nicht das ich die Höhe etc. vorher festlegt.
-
Ach ganz vergessen, die Anzahl der Container ist nicht begrenzt. Also es kann auch sein das es 10 Stück gibt und diese müssen dynamisch angelegt werden. Also geht das nicht das ich die Höhe etc. vorher festlegt.
Wenn Du die Zahl der Container in deinen Spalten meinst, musst du das auch gar nicht. Oder sollen die eine bestimmte Hoehe erreichen? Sowohl Breiten- als auch Hoehenangaben sind fuer normale Divs ueberfluessig, wenn sie die gesamte Breite und die gebrauchte Hoehe einnehmen sollen.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett
-
-
-
-
-