Inhalt
- Die empfindlichen Gegenstände oben drauf
- Ordentlich verpackte T-Shirts
- Die Socken, die die Lücken füllen
- Gute Reise
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 mit CSS spielen 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 willkürlich rammt, kann ich nur so viel für Sie tun.
Unser Koffer enthält drei Arten von Kleidung:
- 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:
div class = 'Koffer'> div class = 'zart'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Die empfindlichen Gegenstände oben drauf
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 Hemden mit Kragen. Sie möchten nicht, dass sie Falten bekommen, also stellen Sie sicher, dass sie nicht gegen andere Kleidungsstücke gedrückt werden.
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
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.
Um die meisten Artikel zu tragen, richten Sie Ihre T-Shirts nebeneinander aus. Genau das ist es Anzeige: Inline-Block ist gedacht für. Diese Elemente können nebeneinander in derselben Zeile sowie nebeneinander stehen Anzeige: Inline Elemente.
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
Wenn Sie zum ursprünglichen HTML-Code zurückkehren, werden Sie feststellen, dass es eine Socke gibt div> zwischen den acht T-Shirts. Schauen Sie sich aber die horizontale Ansicht des Koffers rechts an. Wenn es eine Socke gibt div>, 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 div> 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:
.delicate {display: block; Breite: 60%; } .tshirt {Anzeige: Inline-Block; Breite: 20%; } .socks {display: inline; }}
Hier sind einige alternative Szenarien, um die verschiedenen Verwendungszwecke der Anzeige zu veranschaulichen. Wenn die Delikatessen oben hatten Anzeige: Inline-Blockwü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 es keinen bequemen Puffer geben.
Wenn jedes T-Shirt hätte BildschirmsperreSie hätten einen riesigen Stapel T-Shirts übereinander, eines pro Zeile. Wenn die Socken hätten Anzeige: Inline-Blockwü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!
