In der heutigen Unterrichtsstunde haben wir uns mit CSS besch\u00e4ftigt und sind auf die Frage gesto\u00dfen, wie man Elemente nebeneinander positioniert. Da ich bisher immer mit Bootstrap gearbeitet habe, war mir es gar nicht bewusst, dass die Breite eines Div-Containers gar nicht \u00e4ndert, ob er unter oder neben dem n\u00e4chsten Container gezeigt wird – per default sind die Elemente immer untereinander. <\/p>\n\n\n\n
Mit ein wenig Recherche auf W3Schools und selfhtml habe ich folgende Unterscheidungen gefunden:<\/p>\n\n\n\n
Der Nachteil von float ist, dass float nicht immer responsiv ist – ich verliere also eher mal mein gutes Aussehen bei anderen Bildschirmgr\u00f6\u00dfen – und dass es eben nur ein oder zwei Elemente zueinander positioniert, aber nicht ein klares Layout der gesamten Seite anbietet. Daf\u00fcr ist es am einfachsten zu verstehen. Ich kann den float-Wert auf right, left, none oder inherit setzen, also ist zB. der Text rechts oder links neben dem Bild oder es gibt keinen Textumlauf (Dann steht trotzdem eine Zeile Text neben dem Bild, in Office w\u00e4re das die Eigenschaft „als Zeichen“!) Inherit bedeutet, dass der Float-Wert der Elternelements geerbt wird. Man kann eine Box „\u00fcber“ eine andere legen, wenn die erste links oder rechtsb\u00fcndig ist und die zweite keine Angabe hat – will man das nicht, nutzt man die Eigenschaft „clear“. (Float-Artikel auf w3schools<\/a>)<\/p>\n\n\n\n Flexbox und Griddesign legen Eigenschaften f\u00fcr das gesamte Body-Element fest. Die gesamte Seite wird dann (bei Flex) ein Container, dessen Ausrichtung (Flie\u00dfrichtung) man mit dem Befehl „direktion“ beeinflusst. (Selfthtml-Artikel zu Flex-Containern<\/a> und Artikel zur CSS-Eigenschaft Flex<\/a>). Flexbox beh\u00e4lt ein Layout nicht ganz so gut bei flexiblen viewports – was auf dem einen Display nach 2 Boxen nebeneinander aussieht, kann auf dem n\u00e4chsten Display drei Boxen nebeneinander oder mehr sein. Aber Flexbox ist leicht umzusetzen.<\/p>\n\n\n\n Bei Grid – also auch bei Bootstrap, das ist ein Gridlayout – wird die Seite komplett in ein Raster unterteilt. (Sehr verst\u00e4ndlicher \u00dcberblick zu Rasterbegriffen<\/a>) Man stellt das Display auf „grid“ und kann die Breite der Spalten definieren: Entweder absolut oder mit der Einheit fr (Also Bruchteil), em oder vh – oder man w\u00e4hlt den Wert „auto“. (1em ist in etwa die Breite des jeweils angezeigten Buchstaben M, vh steht f\u00fcr viewport und referenziert prozentual auf die gesamte Breite der Seite\/ des druckbaren Bereichs.)<\/p>\n\n\n\nbody {display:grid;
grid-template-columns: 1fr 2fr 1fr ;
}<\/pre>\n\n\n\n
In dem obigen Beispiel werden 3 Spalten erzeugt, die mittlere ist doppelt so gro\u00df wie die beiden \u00e4u\u00dferen. Prozentangaben wie bei „width“ gehen nicht. Auch die H\u00f6he der Zeilen kann man vorher festlegen, mit grid-template-rows. Das macht Sinn, wenn man etwa eine feste H\u00f6he f\u00fcr Header und Footer will. Bei einer Wiederholung derselben Gr\u00f6\u00dfe nutzt man eine „repeat“-Anweisung, zB grid-template-columns:repeat(4, 1fr);<\/p>\n\n\n\n