PHP Generierte <div> nebeneinander werden untereinander angezeigt

obilaner

Lt. Junior Grade
Registriert
Apr. 2011
Beiträge
389
Hallo.

Ich würde gerne <div> generieren in PHP und sie nebeneinander anordnen. Leider zeigt meine Seite die <div> unntereinander an. Weiss jemand woran das liegen könnte?

Screenshot_1.png


Screenshot_2.png
 

Anhänge

  • Screenshot_4.png
    Screenshot_4.png
    20 KB · Aufrufe: 143
Ja, sowas macht ein <div> nun mal, das es untereinander kommt :)

Was du brauchst sind Container bzw. Templates.

Also div classes, die ein gewisses "Design" beinhalten. Wrapper, Content Boxen etc.

Wieso lagerst du den Style nicht aus, anstatt ihn mit in Code (Body, Header, Footer) rein zu pressen?

Wie wäre es mit Bootstrap?
 
Ehm ich will sie eigentlich nur einfach nacheinander anordnen. Einen Wrappercontainer hat es bereits. Die Frage ist wieso kann man reguläre direkt in den Code geschriebene <div> nacheinander anordnen per 'float-left/right' klasse und die generierten nicht?

bzw weiss jemand einen Workaround?

Zu deinen Fragen:
  • Weil ich beim Layouting keine Lust darauf habe
  • Weil ich ein eigenes Design aus dem Kopf umsetzen will und mir nicht für einfache Knöpfe etc irgendwelche Zusatzbibliotheken installieren möchte.
 
div haben laut HTML Standard den CSS Style display: block , d.h. untereinander.
Du könntest anderen Display Style wählen wie Flexbox oder Gridlayout.
Ergänzung ()

obilaner schrieb:
Ehm ich will sie eigentlich nur einfach nacheinander anordnen. Einen Wrappercontainer hat es bereits. Die Frage ist wieso kann man reguläre direkt in den Code geschriebene <div> nacheinander anordnen per 'float-left/right' klasse und die generierten nicht?

bzw weiss jemand einen Workaround?

Siehe oben, flexbox oder grid layout. Das mit float und clear usw. ist überholt.
 
Also ich fasse eure Aussagen nochmal zusammen:

Es ist faktisch nicht möglich zwei einfache div hintereinander anzuordnen. Und Elemente hintereinander anordnen ist out.

Für Knöpfe nutzt der Pro externe Bibiotheken statt sie selber zu machen und einfache Flussrichtungsangaben sind 'Überholt', weswegen ich auf ein komplettes Gridbox umsteigen muss um ein Paar Bilder nacheinander anzuordnen.

Danke dann auch.

Bleibt alle schön Woke...
Ich mache es dann einfach mal wieder irgendwie allein.

Credo in diesem Leben unter euch deutschen.

Schönen Abend noch.
 
Versuch's mal mit "float: left" und einer fixen Breite. Damit hab ich divs schon nebeneinander hinbkeommen.
 
  • Gefällt mir
Reaktionen: obilaner
Hallo obilander,
in Deiner CSS-Klasse ".gallistebit" hast Du "flow: right;" geschrieben.
Sollte es nicht "float: right;" heißen?
 
  • Gefällt mir
Reaktionen: obilaner
Oha, danke.

Erstens: Ja! Daran lags wohl (vielen dank)

Zweitens: Entschuldigung. Das mit dem Grid klappt jetzt irgendwie total easy.
 
Kurze Frage noch:
Wenn ich eine Gridbox verwende funktioniert das alte padding nicht mehr.

Ich hatte meine einzelnen divs mit
box-sizing: border-box; davon abgehalten das sie grösser werden durch padding.

Mit Gridbox geht das jetzt nicht mehr, deswegen kann ich zb kein border verwenden, weil es das padding nicht mit abschliesst.
 

Anhänge

  • Screenshot_5.png
    Screenshot_5.png
    620,2 KB · Aufrufe: 105
Mal kurz zur Aufklärung:
Wie richtig angemerkt wurde: flow als Eigenschaft für das Design ist veraltete Praxis. Dafür gibt es heute Flexboxen und Grids.
Flow benötigt des weiteren ein Element, das "umflossen" werden soll. Ich habe mir das immer wie ein Bild in Word vorgestellt. Wenn man es an die Seite anordnet, umfließt der Text das Bild. Wenn kein Element da ist, das umflossen werden kann, passieren unerwünschte Dinge bzw. gar nichts. Außerdem muss man einen float wieder clearen. Das halt vor Jahren oftmals Kopfschmerzen bereitet, wenn man nicht verstanden hat, was mit dem Design falsch ist. :D

Ansonsten noch mal durch die guten Dokumentation vom Grid schauen. Da gibt es mehrere Webseiten, die alle möglichen Properties vorstellen. Generell willst du ja nicht viel von dem Grid.
 
Zurück
Oben