Was ist der Deal mit Display Inline-Block?

Wir haben Floats für das Layout verwendet, seit wir die Tische zurückgelassen haben. Es ist eine kuriose Lösung, die oft Probleme verursachen kann, aber wenn Sie wissen, was Sie tun, funktioniert es.

Eine interessante Alternative zu Schwimmern, an die sich die Leute in letzter Zeit immer mehr wenden, ist das Setzen der Anzeige Wert eines Elements zu Inline-Block. Was macht das genau? Wie ist es wie ein Schwimmer? Wo ist der Unterschied? Lassen Sie uns eintauchen und sehen, was wir entdecken können.

Die Anzeigeeigenschaft

Webbrowser stellen verschiedene Elemente auf verschiedene Arten dar. Einige Elemente sind auf Blockebene, dh ihre Standardeinstellung Anzeige Wert ist auf gesetzt Block. Elemente auf Blockebene haben eine definierbare Breite und Höhe und erstellen beim Erstellen automatisch eine neue Zeile im Layout.

Ein Beispiel für ein Blockebenenelement ist ein Absatz. Wenn ich zwei Absätze in ein HTML-Dokument lege, werden sie übereinander gestapelt und nicht nebeneinander angezeigt. Ich habe viel Freiheit in Bezug auf ihre Abmessungen und kann sie wirklich als einzelne Bausteine ​​behandeln, die ich gestalten kann.

Andere Elemente haben ihre Anzeige Wert auf gesetzt in der Reihe standardmäßig. Das heißt, sie haben keine definierbare Höhe und Breite und erstellen keine neuen Zeilen in einem Layout (daher erscheinen sie "Inline"). Inline-Elemente sind im Allgemeinen die Art von Dingen, die Sie innerhalb eines Absatzes oder eines anderen Blockebenenelements einführen: strong, em, Anker usw.

Was passiert, wenn ich ein paar Ankertags in ein HTML-Dokument wirft? Im Gegensatz zu den Absätzen oben, die automatisch gestapelt werden, werden diese Elemente nebeneinander erstellt. Ihre Breite und Höhe werden durch den Inhalt bestimmt, den sie enthalten, und können nicht wie bei den Elementen auf Blockebene manuell überschrieben werden.

Es gibt noch ein paar andere Grundlagen Anzeige Standardwerte, mit denen Sie wahrscheinlich auch vertraut sind. Zum Beispiel Elemente in der Kopf Teil haben eine Anzeigeeigenschaft von keiner.

Eigene Anzeigewerte einstellen

Eine wirklich interessante Funktion von CSS ist die Möglichkeit, das Standardanzeigeverhalten von Elementen zu ändern. Obwohl für ein bestimmtes Element bereits ein Standardverhalten festgelegt ist, können wir es für unsere eigenen Zwecke außer Kraft setzen.

Zum Beispiel können wir diese Inline-Anker-Tags leicht aus dem zweiten Beispiel oben entnehmen und sie dazu bringen, sich eher wie die Absätze auf Blockebene aus dem ersten Beispiel zu verhalten. Wir setzen dies, indem Sie die Anzeigeeigenschaft auf einstellen Block in unserem CSS.

Jetzt verhalten sich unsere Ankertags wie Elemente auf Blockebene, sodass jedes Element eine neue Linie erstellt und einen benutzerdefinierten Wert für Höhe / Breite anwenden kann.

Wie Sie sich vorstellen können, ist es schwieriger, mit der Umkehrung dieses Beispiels zu arbeiten, indem Sie ein Element auf Blockebene nehmen und das Element setzen Anzeige Wert zu in der Reihe. Instinktiv könnten Sie verwenden Anzeige: Inline um zu versuchen, die beiden obigen Absätze nebeneinander erscheinen zu lassen, wenn Sie dies tun, werden die beiden jedoch zu einem einzigen Absatz zusammengefügt.

Wir haben jetzt die Fähigkeit verloren, unsere Breite und Höhe einzustellen, sodass die beiden Absätze unaufhaltsam integriert sind, was wir eigentlich gar nicht wollten.

Schwimmende Elemente

Was also, wenn wir wollen, dass die beiden obigen Absätze getrennt bleiben, aber nebeneinander als einzelne Spalten erscheinen, statt in Zeilen gestapelt zu werden? Die typische Antwort, an die sich viele von uns seit Jahren wenden, sind Schwimmer. Durch Auftragen von? Float: Left? In Bezug auf die Absätze können wir die Funktionalität auf Blockebene beibehalten, während Sie mehrere Inhaltsspalten erstellen.

Floats haben ein interessantes Verhalten. Floated-Elemente neigen zum Beispiel dazu, ihren übergeordneten Container auszublenden, was zu allerlei chaotischen Problemen führt, wenn Sie Hintergrundfarben oder Ränder anwenden. Um dies zu umgehen, haben wir ein paar Tricks. Wir können entweder die Floats auf einem neuen Element (heutzutage häufig ein Pseudoelement) am Ende des Containers löschen oder verwenden Überlauf: Auto auf dem Elternteil. Beide Fixes haben ihre Vorbehalte, aber wenn Sie wissen, wie Sie sie richtig einsetzen können, können Sie normalerweise jedes Layout-Feature ohne allzu große Schwierigkeiten lösen.

Anzeige: Inline-Block

Es gibt unzählige Werte für die Anzeigeeigenschaft, die über das hinausgehen, was wir bereits erwähnt haben, von denen einige hilfreich sind, andere, von denen ich bezweifle, dass Sie sie jemals verwenden werden. Das Thema der heutigen Diskussion ist bei weitem eines der interessantesten und nützlichsten der Gruppe: Inline-Block.

Schauen Sie sich an, was passiert, wenn wir unsere beiden Absätze aus dem obigen Beispiel nehmen und ein anwenden Anzeige Wert von Inline-Block.

Sieht viel wie ein Schwimmer aus, oder? Was passiert also, wenn wir einen übergeordneten Container hinzufügen? Hat es das kollabierende Problem, das wir mit Schwimmern gesehen haben? Nee! Alles funktioniert genau so, wie wir es erwarten.

Was hier passiert, ist, dass wir dem Browser sagen, dass er die Absätze inline anzeigen soll, dass er aber seine Blockeigenschaften beibehalten kann. Dies bedeutet, dass wir die Breite und Höhe manuell festlegen können und die beiden Elemente voneinander getrennt bleiben können. Sie werden jedoch auch nebeneinander im Dokumentenfluss angezeigt. Ziemlich glatt!

Das Ausrichtungsproblem

An der Oberfläche, Inline-Block mag wie der Layoutretter aussehen, auf den Sie gewartet haben. Wer möchte sich mit chaotischen Clearfix-Hacks herumschlagen, wenn Sie mit dieser Methode alles überspringen können? Es stellt sich jedoch heraus, dass Floats nicht die einzige Layoutmethode mit Macken sind, Inline-Block hat auch einige seltsame Funktionen, die Sie Ihren Kopf herum wickeln müssen.

Wenn Sie mehrere Elemente mit unterschiedlichen Höhen haben, sehen Sie eine der ersten Eigenschaften, die Sie verschieben, und Inline-Blöcke. Zum Beispiel passiert Folgendes, wenn Sie einige Absätze nach links verschieben:

Nun, was passiert, wenn Sie Inline-Block verwenden, um dasselbe zu erreichen? Beachten Sie, dass die unteren Ränder der Absätze anstelle des oberen Abschnitts wie im vorherigen Bild ausgerichtet sind.

Zum Glück ist das kein großes Problem. Stellen Sie sicher, dass das Problem behoben ist vertikal ausrichten Eigentum an oben.

Das Whitespace-Problem

Es gibt einen weiteren wichtigen Ort, an dem sich das Verhalten des Inline-Blocks von Floats unterscheidet. Ich finde es bizarr, dass alles in HTML und CSS beim Layout Whitespace-bewusst sein könnte, aber genau das finden wir hier. Betrachten Sie die folgenden Beispiele.

Hier können wir sehen, dass, wenn eine Gruppe von Listenelementen verschoben wird, diese wie erwartet aneinander reißen, so dass wir die Lücke manuell einstellen können, ohne dass unerwarteter zusätzlicher Platz entsteht. Wenn wir jedoch dasselbe mit Inline-Block tun, gibt es ein bisschen Standardbereich, der nicht einmal verschwinden wird, wenn wir unsere Margen auf 0 setzen.

Wie Sie sehen, besteht eine Lösung darin, den Leerraum in unserem HTML-Code zu entfernen und die Elemente direkt gegeneinander zu drücken. Wieder finde ich das ziemlich verwirrend, aber es funktioniert. Eine alternative Lösung, die dasselbe Ergebnis erzielt, ohne mit der visuellen Hierarchie in Ihrem HTML-Code zu verschrauben, besteht darin, einen Rand von -4px auf die Listenelemente anzuwenden.

Browser-Unterstützung

Nun, da wir wissen, was Inline-Block ist und wie er anders funktioniert als Floats, ist es an der Zeit, über jedes Lieblingsthema zu sprechen: die Browser-Unterstützung. Auf welche Grausamkeiten müssen wir eingehen, um sicherzustellen, dass diese Technik auf allen Ebenen funktioniert?

Wenn wir bei CanIUse.com vorbeischauen, um die Antwort zu sehen, sind die Ergebnisse wahrscheinlich viel besser, als Sie es erwartet hätten.

Hier können wir sehen, dass wir zumindest teilweise Unterstützung in allen Bereichen und volle Unterstützung für alles außer IE7 und älter haben (vorgetäuschte Schock und Ehrfurcht). Der Hinweis am unteren Rand informiert uns darüber, dass Inline-Block "nur in IE6 und IE7 auf Elementen mit der Anzeige" Inline "standardmäßig unterstützt wird. Dies bedeutet, dass die Absatzbeispiele, die wir in diesem Artikel verwendet haben, herausgegeben werden.

Glücklicherweise hat der Mozilla-Blog bereits 2009 einige Korrekturen für diesen Weg veröffentlicht. Um den IE zum Mitspielen zu bringen, müssen Sie nur hasLayout mit der Zoom-Eigenschaft auslösen und dann den Sternhack verwenden, um IE6 / 7 als Ziel festzulegen und die Anzeige auf Inline einzustellen . Auf diese Weise können Sie die Inline-Elemente funktional behandeln, als wären sie Inline-Block-Elemente. Es ist sicherlich nicht hübsch, aber es erledigt die Arbeit.

Lesen Sie weiter

Wenn Sie mehr über Inline-Block erfahren möchten, finden Sie hier einige Artikel, die ich für meine Forschung besonders hilfreich fand.

  • Float vs. Inline-Block
  • Was ist Inline-Block?
  • Inline-Block: Viele Beispiele
  • Cross-Browser-Inline-Block

Eine bessere Lösung?

Um ehrlich zu sein, habe ich bis heute noch nie wirklich viel mit Inline-Block gespielt, aber ich habe immer mehr Vorschläge in den Kommentaren gesehen, dass ich diese Methode als Alternative zu Floats erkunde der Ratschlag. Ich war zuversichtlich, dass es tatsächlich ein magischer, unkomplizierter Umgang mit Schwimmern war, aber in Wahrheit ist das wirklich nicht so. Es gibt immer noch einige unerwartete Verhaltensweisen, über die Sie Bescheid wissen und darauf reagieren müssen. Dies führt zu hacktem Code, wie wir ihn häufig mit Float-Clearing-Korrekturen sehen.

Um fair zu sein, ist es tatsächlich eine ziemlich einfache Möglichkeit, Float-ähnliche Layouts zu erstellen. Noch wichtiger ist, dass das CSS, das Sie implementieren müssen, um sicherzustellen, dass es Cross-Browser-kompatibel ist, sogar kürzer ist als der beliebte Micro-Clearfix-Hack von Nicolas Gallagher. Dies macht es für viele Projekte möglicherweise zu einem besseren Weg.

Letztendlich denke ich, dass ich tatsächlich anfangen werde, diese Methode meiner Trickkiste hinzuzufügen. Ich vermute, dass bestimmte Zeiten eintreten werden, wenn Schwimmer nicht ideal sind (Beispiel: Richtige Schwimmer machen alles umgekehrt), und dies ist eine großartige Alternative in solchen Situationen.

Was denkst du? Ist der Inline-Block eine gute Alternative zu Schwimmern? Welche Situationen können Sie sich vorstellen, wo einer eindeutig einen Vorteil gegenüber dem anderen hat?