Das Geheimnis beim Entwerfen von Website-Layouts ohne CSS-Floats

Wenn Sie in den letzten zehn Jahren überhaupt für das Web entworfen haben, sind Sie zweifellos mit CSS vertraut schweben Eigentum. Seit die Branche (zum Glück) das Prinzip tabellenloser Layouts übernommen hat, sind Floats für die meisten von uns die Waffe der Wahl, um ihre Webseiten zu gestalten. Aber ist das die beste Wahl?

Trotz der Beliebtheit dieser Methode führt sie regelmäßig zu Frustration und Verwirrung bei neuen Designern und wird zu einem Problem, wenn schwebende Elemente „ungeklärt“ bleiben. Diese ungeklärten Schwimmkörper können vielfältige Probleme verursachen, die von schlampiger Ästhetik bis hin zur völligen Unzugänglichkeit reichen. Bei einem kleinen Projekt ist es ziemlich einfach, ein Float-Problem zu beheben, aber bei der Arbeit an einer großen Web-App mit dynamischen Inhalten kann es etwas schwieriger sein, wertvolle Zeit verschlingen und Geld kosten.

Eine bessere Alternative

Selbst bei richtiger Anwendung verändern Schwimmer das normaler Fluss eines Dokuments, was zu unerwartetem Verhalten führen und die Gestaltungsmöglichkeiten einschränken kann. Da sich ein Float nicht im „normalen Fluss“ befindet, fließen nicht positionierte Blockboxen, die vor und nach der Float-Box erstellt wurden, vertikal, als ob der Float nicht vorhanden wäre. Bei responsivem Design, bei dem die Größen dynamisch und fließend sind, um den verfügbaren Platz auszufüllen, ist dies alles andere als ideal. Was wäre, wenn es einen besseren Weg gäbe?

Flexbox ist die aufregende Zukunft der Web-Layouts, aber für diejenigen von uns, die ältere Browser unterstützen müssen, ist dies noch ein ferner Traum. Der Anzeige Die Eigenschaft hingegen bietet volle Unterstützung und kann fast alle Layoutfunktionen eines Floats ohne deren Nachteile bereitstellen.

Inline-Block zur Rettung

Der Anzeige Eigentum, in Kombination mit schweben Und Position, bestimmt den Typ des Feldes oder der Felder, die für ein Element generiert werden. Kurz gesagt: Elemente auf Blockebene erstrecken sich über die gesamte Breite ihres Containers und zwingen alle nachfolgenden Elemente zur nächsten Zeile, während Elemente auf Inline-Ebene nur über die Breite ihres Inhalts reichen, sodass jedes Element auf Inline-Ebene daneben auf derselben Zeile nach oben fließen kann Linie.

Lesen:  Entdecken Sie die Vorteile einer Amazon Price Tracker-Erweiterung für Chrome: Festlegen von Preisalarmen und Vergleichen von Preisen

Bewirbt sich Anzeige: Inline-Block zu einem Element generiert einen Blockcontainer auf Inline-Ebene. 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 das nutzen Anzeige Eigenschaft, um unsere Inhalte nebeneinander einzubinden. Da alle unsere Elemente im normalen Fluss bleiben, haben wir keine Probleme mit einem reduzierten übergeordneten Element. Meiner Meinung nach ist dies eine viel sauberere Lösung, die dennoch das gewünschte Ergebnis erzielt.

Siehe den Stift Inline-Block über Floats von davidicus auf CodePen.

Die Technik

Diese Methode funktioniert nahezu überall dort, wo Sie normalerweise den Float anwenden würden. Werfen wir einen Blick auf das klassische Haupt-/Seitenleisten-Layout. Für den HTML-Code haben wir ein Wrapper-Element mit zwei darin enthaltenen untergeordneten Elementen, etwa so:

Unser CSS:

.wrapper, .mainContent, .sideBar { //der Einfachheit halber das Box-Modell ändern -webkit-box-sizing: border-box; -moz-box-sizing: border-box; Boxgröße: border-box; } .wrapper { Schriftgröße: 1em; Polsterung: 1,5em; Breite: 100 %; } .mainContent, .sideBar { display: inline-block; vertikal ausrichten: oben; Breite: 100 %; } @media (min-width: 700px) { .mainContent { margin-right: 5%; Breite: 60 %; } .sideBar { width: 35%; } }

Genauso haben wir den Hauptinhalt und die Seitenleiste angelegt.

Die Richtung des „Floats“ wird durch die Textausrichtung des Wrapper-Divs bestimmt. Da die Standardausrichtung beibehalten wurde, mussten wir nichts tun. Sie können es jedoch problemlos auf „Mitte“ oder „Rechts“ einstellen, um einige Layouts zu erzielen, die mit Floats nicht einmal möglich sind (dazu später mehr). Beachten Sie den Kommentar „keine Leerzeichen“, der zwischen den beiden untergeordneten Divs des steht .Verpackung Container. Das ist wichtig zu beachten, und der Grund dafür ist der eine „Betrug“ über diese Methode.

Lesen:  Wie kann man eine eingefrorene Taskleiste in Windows 10 reparieren?

Leerraum

Kehren wir zum Tag-Beispiel zurück. Beim Schreiben von Text in HTML werden alle Leerzeichen in ein einziges Leerzeichen umgewandelt, unabhängig von der Anzahl der Leerzeichen in Ihrem HTML-Dokument. Alle Lücken, die Sie zwischen Ihren „schwebenden“ Elementen im Markup haben, werden im Browser tatsächlich als Leerzeichen zwischen ihnen registriert, genau wie unser Absatztext. Dies führt natürlich dazu, dass Ihre Größenberechnungen fehlerhaft sind und das letzte Element auf die nächste Ebene der Seite verschoben wird. Kein Bueno! Zum Glück gibt es für uns mehrere Lösungen, um dieses kleine Problem zu beheben. Wie zum Beispiel:

  • Satz Schriftgröße: 0;. Das Leerzeichen, mit dem wir es zu tun haben, ist ein Zeichenfeld. Wenn Sie also die Schriftgröße auf Null setzen, wird auch die Größe des Leerzeichens auf Null gesetzt. Das Problem dabei ist, dass Sie die Schriftgrößen der untergeordneten Elemente wieder erhöhen müssen und die Größenanpassung dieser Elemente völlig verloren geht. Es könnte etwas umständlich werden, den Überblick zu behalten, daher ist dieser Weg nicht ideal.
  • Entfernen Sie das Leerzeichen zwischen Ihren Elementen in Ihrem HTML und entfernen Sie so das Leerzeichen aus der Gleichung. Ich habe das eine Zeit lang gemacht, aber es sah einfach schlampig aus und machte es schwieriger zu lesen.

  • Durch das Einfügen eines HTML-Kommentars zwischen Ihren Elementen wird auch das Leerzeichen entfernt, wie es in unserem Beispiel der Fall war. Das 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. Dadurch können Sie auch die korrekte Einrückung des eigentlichen Elements selbst beibehalten.

Lesen:  Top 26 der besten WCOForever-Alternativen zum kostenlosen Ansehen von Animes

Floats funktionieren für mich, warum wechseln?

Sie denken vielleicht: „Das ist gut so, 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 können. Zum Beispiel:

  • Der schwer fassbare „Centered Float“, der oft wünschenswert ist, erfordert zusätzliches Markup und mehrere CSS-Eigenschaften, um ihn zu erreichen. Bei der Anzeigemethode erfolgt dies einfach durch AuftragenTextausrichtung: Mitte zum Umschlag.

  • Der größte Vorteil der Wahl der Anzeigemethode ist die Möglichkeit, Ihre Inhalte vertikal auszurichten. Wie oft wollten Sie ein Element auf sein Geschwisterelement zentrieren? Sie könnten die Positionierung mit dem Trick „Negativer Rand/Übersetzung“ verwenden, aber auch dies ist in einer reaktionsfähigen, dynamischen Umgebung nicht vorzuziehen. Stattdessen bewerben vertikal ausrichten: Mitte; Zentriert Ihre Elemente jedes Mal perfekt, ohne dass Sie zusätzliche Arbeit leisten müssen. (Siehe den Stift Inline-Block über Floats von davidicus auf CodePen.)

Zum Abschluss

In Wirklichkeit gibt es beim Webdesign kein Patentrezept, das für alle passt, sondern es kommt auf die persönlichen Vorlieben an. In bestimmten Situationen verwende ich immer noch Schwimmkörper und manchmal ist es wirklich das beste Werkzeug für den Job. Ich bin jedoch der Meinung, dass die Verwendung der Anzeigemethode eindeutig einen Vorteil bietet. Aus meiner Erfahrung heraus ist es die beste und am wenigsten fehleranfällige Methode für den Umgang mit Layouts. Für diejenigen unter Ihnen, die diese Methode näher erforschen möchten, habe ich ein „Just Say No To Floats“-Raster erstellt: Inline-Block-Grid mit SASS auf CodePen.

Ausgewähltes Bild/Miniaturansicht, eingestürzte Wand über Chris Cotterman

Aktuelle Artikel:

Empfohlen