Grundlegendes zur CSS-Anzeigeeigenschaft

Es ist Mitternacht und das hier div auf Ihrer Website sieht immer noch aus wie eine Spielzeugkiste für Kinder. Alle Elemente sind durcheinander und jedes Mal, wenn Sie damit spielen CSS 's Anzeige Eigentum ordnen sie sich in einen ganz anderen Unsinn um.

Wenn Sie wie ich sind, lösen Sie dies wahrscheinlich, indem Sie leise murmeln und mit Ihrer Tastatur immer aggressiver werden. Und obwohl diese Strategie schon früher für mich funktioniert hat, habe ich mich kürzlich vorgenommen, einen besseren Weg zu finden, um das zu verstehen Anzeige Eigentum.

Es stellt sich heraus, die Grundlagen von Anzeige sind viel einfacher als ich ursprünglich dachte. Tatsächlich verwenden sie die gleichen Prinzipien wie das Packen eines Koffers. Ich werde abdecken Bildschirmsperre , Inline-Block und im Einklang . Wenn Sie zuvor einen Koffer ordentlich angeordnet haben, sehen Sie die Parallele. Wenn Sie die Art von Person sind, die Ihre gesamte Kleidung auf zufällige Weise rammt - nun, ich kann nur so viel für Sie tun.

Unser Koffer enthält drei Arten von Kleidung:

wie man aktionen in photoshop aufzeichnet
  • Zart wie ein Hemd mit Kragen
  • T-Shirts, die aufgerollt werden können
  • Socken oder Unterwäsche, die in Lücken gestopft werden können

Als Referenz würde es so aussehen, wenn wir den Koffer in HTML modellieren würden:

Die empfindlichen Gegenstände oben drauf

Das Hemd mit Kragen liegt auf einem Stapel der Kleidung darunter. Es ist das einzige Objekt, das eine eigene Ebene belegt

Das Hemd mit Kragen liegt auf einem Stapel der Kleidung darunter. Es ist das einzige Objekt, das eine eigene Ebene belegt

Bildschirmsperre ist die Standardeinstellung für die meisten HTML-Elemente. Das heißt, das Element nimmt den gesamten horizontalen Raum innerhalb seines Containers ein div . Wenn es sich neben anderen Geschwisterelementen befindet, beginnt eine neue Zeile und lässt keine anderen Elemente in der Zeile zu. Es ähnelt den empfindlichen Gegenständen, die Sie oben auf Ihren Koffer legen. Dies sind empfindliche oder intelligente Artikel wie Kragenhemden. Sie möchten nicht, dass sie Falten bekommen, also stellen Sie sicher, dass sie nicht gegen andere Kleidungsstücke gedrückt werden.

Taco Bell Logo schwarz und weiß

Dies bringt einen der schwierigsten Teile von Bildschirmsperre . Beachten Sie, dass das Hemd mit Kragen nicht die gesamte Breite des Koffers einnimmt? Das bedeutet nicht, dass andere Gegenstände auf ihr Niveau springen. Nehmen wir an, dieses Hemd ist 60 Prozent der Breite des Koffers. es würde immer noch andere Elemente daran hindern, es auf der obersten Ebene zu verbinden.

Deshalb gibt es auf dem Bild einen orangefarbenen Rand. EIN Bildschirmsperre Das Element fügt automatisch einen Rand hinzu, wenn es nicht den gesamten horizontalen Raum einnimmt.

Ordentlich verpackte T-Shirts

Hier sehen wir die obere und untere Reihe von T-Shirts mit jeweils vier Shirts

Hier sehen wir die obere und untere Reihe von T-Shirts mit jeweils vier Shirts

Der größte Teil Ihres Koffers ist wahrscheinlich voll mit dem Rest Ihrer Kleidung für Ihre Reise. Der Einfachheit halber werden wir dies auf T-Shirts reduzieren. Im Internet gibt es eine große Debatte darüber, ob das Falten oder Rollen effizienter ist. Ich bin eine faltbare Person.

Wie auch immer, um die meisten Artikel zu tragen, richten Sie Ihre T-Shirts nebeneinander aus. Genau das ist was Anzeige: Inline-Block ist gedacht für. Diese Elemente können nebeneinander in derselben Zeile sowie nebeneinander stehen Anzeige: Inline Elemente.

Winsor Newton Aquarellpinsel Serie 7

nicht wie Anzeige: Inline Elemente, ein Inline-Block Das Element wechselt in die nächste Zeile, wenn es nicht in das enthaltene Element passt div neben dem anderen Inline-Block Elemente. Damit ein T-Shirt in die nächste Reihe gelangt, müssen Sie es halbieren und mit der verbleibenden Hälfte eine neue Reihe beginnen. Inline-Block Elemente dürfen nicht in zwei Hälften geteilt werden, wenn sie nicht auf eine Linie passen.

Die Socken, die die Lücken füllen

Die Socken sind Inline-Elemente, was bedeutet, dass sie die Lücken um die T-Shirts füllen

Die Socken sind Inline-Elemente, was bedeutet, dass sie die Lücken um die T-Shirts füllen

Wenn Sie zum ursprünglichen HTML-Code zurückkehren, werden Sie feststellen, dass es eine Socke gibt zwischen den acht T-Shirts. Schauen Sie sich aber die horizontale Ansicht des Koffers rechts an. Wenn es eine Socke gibt , wie kann es die mittlere Reihe beenden und die untere Reihe beginnen? Dies ist der Zweck von Anzeige: Inline !

Ein im Einklang Das Element wird in die nächste Zeile übertragen, wenn es die Breite des Elements überschreitet div (Auf diese Weise unterscheidet es sich von Inline-Block oder Block ). Da unsere Socken div ist voll von Socken, die willkürlich in Lücken gestopft sind. Es kann leicht beginnen, die Lücke auf der rechten Seite der mittleren Reihe zu füllen und über die untere Reihe zu laufen.

Dazu müssen keine Socken in zwei Hälften geschnitten werden. Deshalb können sie werden im Einklang , während T-Shirts nur sein können Inline-Block . Wenn die T-Shirts in der mittleren Reihe nur 60 Prozent der Breite einnahmen, waren die Socken würde nach oben gehen, um den gesamten Raum auf dem Rest der Reihe zu füllen.

Gute Reise

Dies ist das endgültige CSS für unseren Koffer:

Dies ist beim Kauf eines Monitors nicht wichtig
.delicate { display:block; width:60%; } .tshirt{ display:inline-block; width:20%; } .socks{ display:inline; }

Hier sind einige alternative Szenarien, um die verschiedenen Verwendungszwecke der Anzeige zu veranschaulichen. Wenn die Delikatessen oben hatten Anzeige: Inline-Block würden sie direkt neben die T-Shirts passen. Einige der T-Shirts würden sich bis zur obersten Linie bewegen, und der Rest würde sich entsprechend anpassen. Links und rechts vom Hemd mit Kragen würde sich kein bequemer Puffer befinden.

Wenn jedes T-Shirt hätte Bildschirmsperre Sie hätten einen riesigen Stapel T-Shirts übereinander, eines pro Zeile. Wenn die Socken hätten Anzeige: Inline-Block würden sie alle in der untersten Reihe sitzen, anstatt zwischen den beiden Reihen zu fließen. Einige T-Shirts würden in eine andere Reihe geschoben und bilden eine vierte Linie. Rechts von der mittleren Reihe der T-Shirts würde sich eine Lücke befinden.

Mit der hier beschriebenen Methode erhalten wir einen ordentlich verpackten Koffer, der den verfügbaren Platz optimal nutzt.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 289; kauf es hier !

Zum Thema passende Artikel: