Das Geheimnis der Gestaltung von Website-Layouts ohne CSS Floats

Wenn Sie im letzten Jahrzehnt für das Web entworfen haben, sind Sie zweifellos mit der CSS-Eigenschaft float vertraut. Seit die Industrie (glücklicherweise) das Prinzip der tabellosen Layouts übernommen hat, sind Floats die Waffe der Wahl, die die meisten von uns verwenden, um unsere Webseiten zu gestalten, aber ist es die beste Wahl?

Trotz der Popularität dieser Methode ist es regelmäßig die Ursache von Frustration und Verwirrung für neue Designer und wird zu einem Problem, wenn schwebende Elemente "ungeklärt" bleiben. Diese ungeklärten Schwebekörper können mehrere Probleme verursachen, die von schlampiger Ästhetik bis zur vollständigen Unzugänglichkeit reichen. Bei einem kleinen Projekt ist es ziemlich einfach, ein Float-Problem zu lösen, aber wenn man an einer großen Web-App mit dynamischen Inhalten arbeitet, kann es ein bisschen kniffliger sein, kostet wertvolle Zeit und kostet Geld.

Eine bessere Alternative

Auch bei richtiger Verwendung ändern Floats die normaler Fluss eines Dokuments, das zu unerwartetem Verhalten führen und die Gestaltungsoptionen einschränken kann. Da sich ein Float nicht im "normalen Fluss" befindet, fließen nicht positionierte Blockfelder, die vor und nach der Floatbox erstellt wurden, vertikal, als ob der Float nicht vorhanden wäre. Mit reaktionsfreudigem Design, bei dem die Größen dynamisch und fließend sind, um den verfügbaren Raum zu füllen, ist dies alles andere als ideal. Was wäre, wenn es einen besseren Weg gäbe?

Flexbox ist die aufregende Zukunft von Web-Layouts, aber für diejenigen von uns, die ältere Browser unterstützen müssen, ist dies immer noch ein weit entfernter Traum. Die Anzeigeeigenschaft hat andererseits volle Unterstützung und kann fast die gesamte Layoutfunktionalität eines Floats ohne die Nachteile bereitstellen.

Inline-Block zur Rettung

Die Anzeigeeigenschaft bestimmt in Kombination mit " float" und " position" den Typ der Box oder Boxen, die für ein Element generiert werden. In einer sehr einfachen Kurzdarstellung erstrecken sich Elemente auf Blockebene über die gesamte Breite ihres Containers, wobei alle nachfolgenden Elemente auf die nächste Zeile gezwungen werden, während Inline-Levelelemente nur die Breite ihres Inhalts überspannen, so dass jedes Inline-Levelelement daneben daneben fließen kann Linie.

Durch Anwenden von display: inline-block auf ein Element wird ein Inline-Level-Blockcontainer generiert. Denken Sie an den Text in einem Tag. Sie sind alle miteinander "inline", während das Tag selbst ein Container auf Blockebene ist. Wenn wir dieses Verhalten verstehen, können wir die Eigenschaft display verwenden, um unsere Inhalte nebeneinander einzufügen. Da alle unsere Elemente im normalen Ablauf bleiben, haben wir keine Probleme mit einem reduzierten übergeordneten Element. Meiner Meinung nach ist dies eine viel sauberere Lösung, die immer noch das gewünschte Ergebnis erzielt.

Sieh den Stift Inline-Block über Schwimmern von davidicus auf CodePen.

Die Technik

Diese Methode funktioniert fast überall, wo Sie normalerweise den Float anwenden würden. Werfen wir einen Blick auf das klassische Main / Sidebar-Layout. Für das HTML haben wir ein Wrapper-Element mit zwei untergeordneten Elementen wie folgt:

Unser CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Genau so haben wir den Hauptinhalt und die Seitenleiste angelegt.

Die Richtung des "float" wird durch die Textausrichtung des Wrapper div bestimmt. Da die Standardausrichtung verlassen wurde, mussten wir nichts tun. Sie können es jedoch leicht auf Mitte oder rechts setzen, um einige Layouts zu erreichen, die mit Floats nicht möglich sind (mehr dazu später). Beachten Sie den Kommentar "keine Leerzeichen", der zwischen den beiden untergeordneten divs des Wrapper- Containers platziert wird. Dies ist wichtig zu beachten, und der Grund dafür ist der eine "con" über diese Methode.

Leerraum

Gehen wir zurück zum Tag-Beispiel. Wenn Sie Text in HTML schreiben, wird der gesamte weiße Bereich in ein einzelnes Leerzeichen eingeschlossen, unabhängig von der Anzahl der Leerzeichen in Ihrem HTML-Dokument. Daher werden alle Lücken, die Sie zwischen Ihren "floated" -Elementen im Markup haben, tatsächlich als Leerzeichen zwischen ihnen im Browser registriert, genau wie unser Absatztext. Dies führt natürlich dazu, dass Ihre Größenberechnungen das letzte Element auf die nächste Ebene der Seite bringen. Kein bueno! Zum Glück für uns gibt es mehrere Lösungen, um dieses kleine Problem zu beheben. Sowie:

• Setze Schriftgröße: 0; . Der Raum, mit dem wir es zu tun haben, ist ein Zeichenraum. Wenn also die Schriftgröße auf Null gesetzt wird, wird auch die Größe des Raums auf null gesetzt. Das Problem dabei ist, dass Sie die Schriftgröße der untergeordneten Elemente wieder erhöhen müssen und dass die Größenbemaßung vollständig aus dem Fenster entfernt wird. Dies könnte ein bisschen umständlich sein, so dass dieser Weg nicht ideal ist.

• Entfernen Sie den Abstand zwischen Ihren Elementen in Ihrem HTML-Code und entfernen Sie dadurch den Platz aus der Gleichung. Ich machte das eine Weile, aber es sah einfach schlampig aus und machte es schwieriger zu lesen.

• Wenn Sie einen HTML-Kommentar zwischen Ihren Elementen hinzufügen, wird auch das Leerzeichen entfernt, wie in unserem Beispiel. Dies ist meine bevorzugte Lösung . Die Texthervorhebung in den meisten Texteditoren ist so, dass der Kontrast zwischen der Notiz und den Elementen ausreicht, um die Lesbarkeit Ihrer Markierung deutlich zu verbessern. Auf diese Weise können Sie auch den richtigen Einzug des eigentlichen Elements beibehalten.

Floats funktionieren für mich, warum ändern?

Du denkst vielleicht: "Das ist gut und alle, aber warum sollte ich eine Methode ändern, die für mich gut funktioniert?" Nun, selbst wenn Sie ein Float Master sind, gibt es bestimmte Dinge, die sie einfach nicht tun können. Zum Beispiel:

• Der schwer zu erreichende "zentrierte Float", der oft wünschenswert ist, erfordert zusätzliche Markup- und mehrere CSS-Eigenschaften, um zu erreichen. Bei der Anzeigemethode geschieht dies einfach durch Anwenden von text-align: center auf den Wrapper.

• Der größte Vorteil bei der Auswahl der Anzeigemethode ist die Möglichkeit, Ihren Inhalt vertikal auszurichten. Wie oft wollten Sie ein Element zu seinem Geschwister zentrieren? Sie können die Positionierung mit dem Negativrand / Übersetzungstrick verwenden, aber dies ist in einer reaktionsfähigen, dynamischen Umgebung nicht zu bevorzugen. Stattdessen vertikale Ausrichtung anwenden : Mitte; wird Ihre Elemente jedes Mal perfekt zentrieren ohne zusätzliche Arbeit von Ihnen. (Siehe den Stift Inline-Block über Schwimmern von davidicus auf CodePen.)

Um es abzuschließen

In der Realität gibt es kein "one size fits all", wenn es um Webdesign geht, und es kommt wirklich auf persönliche Vorlieben an. Ich verwende immer noch Floats in bestimmten Situationen und manchmal ist es wirklich das beste Werkzeug für den Job. Ich habe jedoch das Gefühl, dass es einen deutlichen Vorteil bei der Verwendung der Anzeige-Methode gibt. Aus meiner Erfahrung habe ich festgestellt, dass es die beste, am wenigsten fehleranfällige Methode für den Umgang mit Layouts ist. Für diejenigen von euch, die diese Methode noch mehr erforschen möchten, habe ich ein "Just Say No To Floats" -Grid erstellt: Inline-Block Grid mit SASS auf CodePen.

Ausgewähltes Bild / Vorschaubild, eingestürzte Mauer über Chris Cottman