Das Medienobjekt-Muster ist: Bild-Dingens links, Überschrift und Text rechts.
Das hat Nicole Sullivan es genannt und der Name blieb. Es ist ein ziemlich einfaches Muster, aber wie bei allen Dingen im Webdesign kann es auf viele Arten umgesetzt werden.
Lassen Sie uns einige dieser Wege ausprobieren. In diesen Demos konzentriere ich mich nicht besonders auf Benennungskonventionen, Semantik oder Browserunterstützung. Nur Möglichkeiten.
Mit Floats
Sicherlich könnten wir das Bild links flottieren!
Siehe den Pen Media Block #1 von Chris Coyier (@chriscoyier) auf CodePen.
Aber nur zu flottieren bedeutet, dass es zu einem Zeilenumbruch kommt. Ein Zeilenumbruch kann völlig in Ordnung sein, oder Sie möchten ihn vielleicht nicht.
Um das zu beheben, könnten wir sicherstellen, dass der gesamte Text in einem Element umschlossen ist, und dann sicherstellen, dass dieses Element einen left-padding hat, der der Breite des Bildes und jeglichem Leerraum dazwischen entspricht.
Siehe den Pen Media Block #2 von Chris Coyier (@chriscoyier) auf CodePen.
Oder Sie könnten *beide Seiten* flottieren
Siehe den Pen Media Block #3 von Chris Coyier (@chriscoyier) auf CodePen.
Mit Flexbox
Flexbox macht da schnell kurzen Prozess!
Siehe den Pen Media Block #4 von Chris Coyier (@chriscoyier) auf CodePen.
Beachten Sie, dass wir dem <img> erlauben, ein Flex-Item zu werden. Wir haben align-items: flex-start; verwendet, um sicherzustellen, dass es sich nicht auf die gleiche Höhe wie der Text dehnt.
Mit Tabellen
Das Media-Objekt könnte eine zweizellige Zeile einer Tabelle sein
Siehe den Pen Media Block #5 von Chris Coyier (@chriscoyier) auf CodePen.
Wenn Sie Nicht-<table>-Markup beibehalten möchten, ist es immer noch möglich, es sich wie eine Tabelle verhalten zu lassen, über display: table;
Siehe den Pen Media Block #6 von Chris Coyier (@chriscoyier) auf CodePen.
Mit Grid
Grid-Layout ermöglicht es uns, eine Reihe von Spalten zu definieren. Es ist ziemlich einfach, die erste Spalte auf die gewünschte feste Breite einzustellen und die zweite Spalte den Rest des Platzes einnehmen zu lassen.
Siehe den Pen Media Block #7 von Chris Coyier (@chriscoyier) auf CodePen.
Wie bei Flexbox können wir verhindern, dass das Bild sich selbst dehnt, indem wir es mit align-self: start; oben ausrichten.
Ich bin sicher, ihr könnt noch ein Dutzend weitere Wege finden, es zu tun!
Stoff zum Nachdenken über MEHRERE WEGE
Hallo Chris,
Das ist interessant, weil ich denke, Sie haben das *gängigste* Muster weggelassen, nämlich die Geschwister des Bildes/Floats als neue Block-Formatierungskontexte zu gestalten (http://codepen.io/thierry/pen/JEOavP). Der Grund, warum dies das gängigste Muster ist, ist, dass man **die Breite des "Mediums" nicht kennen muss**.
Nebenbei bemerkt, ist diese Konstruktion nichts anderes als ein 2-Spalten-Layout, aber viele Leute haben Schwierigkeiten, diese Gestaltung mit etwas anderem als einem "Media-Objekt" zu assoziieren... :-(
Gleiches hier. Ich mache das IMMER so. Wickle den "Textinhalt" in ein div und mache overflow: hidden.
Ja! Das ist ein großartiger Ansatz.
Ich weiß nicht, wie man "am gängigsten" misst, aber ich würde denken, es ist "was immer Bootstrap macht", was in der "aktuellsten stabilen Version"
table-cellist, interessant genug. Es ist Flexbox in v4, was sicherlich mein bevorzugter Ansatz wäre."Am gängigsten" in dem Sinne, dass es der älteste Ansatz ist, was bedeutet, dass er auch die beste Browserunterstützung (mit Abstand) hat. Das einzige Problem dabei ist, wenn die Box ein **containing block** ist und Sie verschachtelte Elemente *außerhalb* davon positionieren müssen.
Auf jeden Fall werden wir bald eine Möglichkeit haben, dies einfach zu lösen, nicht durch die Verwendung von
table-celloderflexbox(à la Bootstrap), sondern durch die Verwendung vondisplay:flow-root.Das ist großartig! Danke.
Ich mag die absolute Positionierung des Bildes relativ zum Container und dann das Auffüllen des Containers von innen. Das vermeidet das Umschließen des Inhalts in einem zusätzlichen Container.
Der Hauptvorteil der Verwendung von display:table ist, dass Sie sowohl den bildähnlichen als auch den textähnlichen Inhalt vertikal ausrichten können und eine bessere Browserunterstützung als Flexbox haben.
In dieser Form wird es oft als Flag Object bezeichnet, popularisiert von Harry Roberts.
Es ist erwähnenswert, dass der bildähnliche Inhalt auch Text sein kann (oder im Grunde alles), zum Beispiel könnte er ein Datum enthalten. Wichtig ist, dass die Breite seines Kindes festgelegt werden muss.
Ich verwende das Flag Object ubiquitär, und solange Sie nicht <IE8 unterstützen, gibt es keinen inhärenten Grund, das traditionelle Media-Objekt mit Floats zu verwenden.
Diese Flag Objects können auch verschachtelt und komponiert werden. Hier liegt die eigentliche Stärke. Besonders wenn sie mit einem leistungsstarken Grid-System kombiniert werden. Ich habe nur gelegentlich Bedarf an Flexbox, so mächtig ist das Komponieren dieser Komponenten.
Hallo,
Ein toller Artikel.
Zum Thema Flexbox – es ist immer knifflig, wenn man alle Geräte und Browser unterstützen muss... Es kann SO viele Probleme verursachen...
Wenn Sie Autoprefixer verwenden und die Eigenheiten kennen (https://github.com/philipwalton/flexbugs), ist es tatsächlich unglaublich zuverlässig/stabil – ich persönlich verwende nicht die alte Syntax (oder Tweener) und greife stattdessen auf andere Methoden zurück. Flexbox ist effizienter und wird gegenüber älteren Layoutmodellen empfohlen – https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#use_flexbox_over_older_layout_models
oder das gleiche wie oben, aber
mit Floats