Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
PHP Generierte <div> nebeneinander werden untereinander angezeigt
- Ersteller obilaner
- Erstellt am
chr1zZo
Commodore
- Registriert
- Feb. 2009
- Beiträge
- 4.254
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?
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:
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.
LencoX2
Commander
- Registriert
- Feb. 2006
- Beiträge
- 2.188
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.
Siehe oben, flexbox oder grid layout. Das mit float und clear usw. ist überholt.
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.
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.
schrotti12
Lt. Junior Grade
- Registriert
- Juli 2004
- Beiträge
- 463
Versuch's mal mit "float: left" und einer fixen Breite. Damit hab ich divs schon nebeneinander hinbkeommen.
Du musst die CSS Regel
auf die div setzen:
https://stackblitz.com/edit/js-kzozcg?file=index.js,index.html,style.css
Würde aber auch eher flexbox oder grid empfehlen.
CSS:
display: inline-block;
https://stackblitz.com/edit/js-kzozcg?file=index.js,index.html,style.css
Würde aber auch eher flexbox oder grid empfehlen.
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.
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
LencoX2
Commander
- Registriert
- Feb. 2006
- Beiträge
- 2.188
@obilaner :
ich hab von flow abgeraten, weil es a) veraltet ist und abgeraten wird und b) abgeraten, weil sich damit nicht wirklich gut steuern lässt wie die Elemente sich anordnen lassen.
Wenn du Grid nutzt schau mal hier vorbei für Abstände: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/gap
ich hab von flow abgeraten, weil es a) veraltet ist und abgeraten wird und b) abgeraten, weil sich damit nicht wirklich gut steuern lässt wie die Elemente sich anordnen lassen.
Wenn du Grid nutzt schau mal hier vorbei für Abstände: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/gap
- Registriert
- Feb. 2009
- Beiträge
- 832
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.
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.
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.
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.
Ähnliche Themen
- Antworten
- 2
- Aufrufe
- 333
- Antworten
- 9
- Aufrufe
- 4.142
- Antworten
- 14
- Aufrufe
- 2.636
- Antworten
- 21
- Aufrufe
- 29.456