Mehrere Kästchen mit inhalt, jedoch chaotisch geordnet

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

RXBeat

Mitglied
9 März 2019
123
0
16
42
Kleine mehrere Boxen erstellen und inhalt werden Links sein. Natürlich verrschiedene Kategorieren.


So weit bin ich jetzt aber mir gefällt diese anordnung irgendwie nicht. Wenn man das Fenster kleiner macht, dann Hüpft das dritte Feld unter das zweite anstatt unter das erste.
Ich weiß natürlich das es was mit dem inhalt der boxen zu tun hat und das bei Box 1 die meisten Zeilen sind, ist ja jetzt auch absicht.

Habt ihr eine Idee wie man das ein wenig verschönern kann? Damit meine ich die funktion selbst.
Ich dachte vielleicht eine Tabelle mit 3 Zeilen und in jede Zeile 3 Boxen? Aber das hört sich sogar für mich Anfänger irgendwie nach fusch an :)

Am liebsten wäre mir 3x3 Felder und soll das Fenster füllen. Alle Kästchen ungefähr gleich groß. Aber wenn unterschiedlich groß, sollen es ein system geben. Also dennoch untereinander. Das jetzige ist ja irgendwie chaos. Mit einem einfachen befehl kann ich das glaub ich auch nicht gerade bügeln.

Ich nehme auch Tipps und Ideen auf :)

THanks
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Wenn es 3x3 Felder sein sollen kannst Du das sehr einfach mit Gridlayout erreichen:
Code:
body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten gleicher Breite */
}
Und das float:left, das width:100% (das wird dann durch das Gridlayout fest gelegt) und das <br> zwischen den Containern weglassen.
 

RXBeat

Mitglied
9 März 2019
123
0
16
42
Hi Sempervivum,
mit Gridlayout baue ich eigentlich das Grundgerüst der Seite also oben Titel, Unten hauptfenster etc.
Das Problem hier ist, nun haben ja alle Kästchen die selbe höhe. Das hätte ich auch mit einer festen height:200px hinbekommen. Dann sieht es auch so aus. Wobei deine version natürlich besser wäre. Aber irgendwie wirkt man das optisch zu quadratisch alles :D
Dennoch schon mal vielen Dank. Muss erst mal weiter arbeiten danach guck ich mir das alles noch mal genauer an
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Meistens ist eine einheitliche Höhe das was man will und, als es weder Flex- noch Gridlayout gab, in CSS schmerzlich vermisst und mit Javascript-Krücken zustande gebracht hat.
Eine feste Höhe hat immer den entscheidenden Nachteil, dass sie sich nicht an den Inhalt anpasst.
 
Zuletzt bearbeitet:

RXBeat

Mitglied
9 März 2019
123
0
16
42
Das ist auch cool, hab erst mal die version von Sempervivum genommen da es ein wenig eilig hat und werde mir das masonry genauer anschauen. Könnte man sicherlich was cooles mit machen. Auch vielen Dank dafür.
 
Werbung:

Neueste Beiträge