Element in der unteren Ecke schwebend positionieren

Sie müssen ein Element rechts oder links positionieren, sodass Text darum herum fließt? Das ist mit der float-Eigenschaft eine einfache Aufgabe. Aber was ist, wenn wir dieses Element (nennen wir es ein Bild) auch noch in eine der unteren Ecken schieben wollen? Klingt etwas knifflig, oder? Wir brauchen wahrscheinlich JavaScript?

Nein, ein paar Zeilen (kniffliger) CSS reichen aus! Hier ist die reine CSS-Lösung, die Ihr Bild in der unteren Ecke verankert, unabhängig von Größe und Inhalt.

Vergrößern Sie das Wrapper-Element und sehen Sie die Magie am Werk

Lassen Sie uns den Code analysieren.

Markup und Layout

Wir benötigen ein Wrapper-Element, um alles zu umschließen, und darauf werden wir Flexbox anwenden. Flexbox erlaubt uns, die standardmäßige stretch-Ausrichtung zu nutzen, um später height: 100% verwenden zu können.

<div class="wrapper">
  <div class="box">
    <div class="float"><img></div>
    Lorem ipsum dolor ...
  </div>
</div>

.wrapper {
  display: flex;
}

.float {
  float: right;
  height: 100%;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
}

Das .box innerhalb des .wrapper ist unser Flex-Item. Wir benötigen keine besondere CSS für die Box. Sie definiert die Höhe des Wrappers und wird gleichzeitig auf die gleiche Höhe gestreckt. Dieses Verhalten liefert uns eine "Referenzhöhe", die von den Kindelementen verwendet werden kann.

Aus der Spezifikation

Wenn das Flex-Item align-self: stretch hat, wird das Layout seiner Inhalte neu berechnet, wobei diese verwendete Größe als seine definitive Quergröße behandelt wird, damit prozentual bemessene Kinder aufgelöst werden können.

Das Schlüsselwort ist definitiv, was uns erlaubt, eine prozentuale (%) Höhe sicher innerhalb des Box-Elements zu verwenden.

Nun zum schwebenden Element

Unser .float-Element nimmt dank der oben beschriebenen Höhenberechnung die volle Höhe neben dem Textinhalt ein. Innerhalb dieses Elements schieben wir das Bild mit Flexbox-Ausrichtung nach unten.

Nun zur eigentlichen Trickerei, der Verwendung der shape-outside-Eigenschaft. Hier ist, wie MDN sie definiert

Die CSS-Eigenschaft `shape-outside` definiert eine Form – die nicht rechteckig sein kann –, um die herum benachbarter Inline-Inhalt umbrechen soll. Standardmäßig bricht Inline-Inhalt um seine Margin-Box herum; shape-outside bietet eine Möglichkeit, diesen Umbruch anzupassen, sodass Text um komplexe Objekte statt um einfache Boxen fließen kann.

Mit anderen Worten, shape-outside legt fest, wie der Inhalt um die Bounding Box eines Elements fließt.

Sie akzeptiert eine Reihe von Werten. Einer davon ist die Funktion inset(), die, wieder laut MDN

Definiert ein Innenrechteck. Wenn alle vier ersten Argumente angegeben sind, stellen sie die oberen, rechten, unteren und linken Abstände vom Referenzrahmen nach innen dar, die die Positionen der Kanten des Innenrechtecks definieren.

Also, mit shape-outside: inset(calc(100% - X) 0 0) können wir ein Innenrechteck erstellen, das genau am oberen Rand des Bildes beginnt. Und der obere Rand ist gleich 100% - X, wobei X die Bildhöhe und 100% die Höhe des .float-Elements ist. Dies ermöglicht es dem Text, innerhalb des *freien* Raums oberhalb des Bildes zu fließen. Dies ist responsiv, und wir können einfach zwischen links und rechts wechseln (indem wir die float-Eigenschaft anpassen).

Das war's! Das einzige größere Manko ist, dass Sie die Bildhöhe kennen müssen.

Optimieren wir den Markup

Wir können unseren Code noch etwas optimieren und die zusätzliche Wrapper-Schicht um das Bild entfernen.

<div class="wrapper">
  <div class="box">
    <img class="float">
    Lorem ipsum dolor ...
  </div>
</div>

Dann würde unser CSS so aussehen:

.wrapper {
  display: flex;
}

.float {
  float: right;
  height: 100%;
  width: 100px;
  shape-outside: inset(calc(100% - 100px /*height */) 0 0);
  object-fit: contain;
  object-position: bottom;
}

Da wir den zusätzlichen Wrapper entfernt haben, benötigen wir eine andere Technik, um das Bild in der unteren Ecke zu platzieren. Dazu verwenden wir object-fit und object-position, müssen aber die Breite des Bildes explizit angeben.

Mit dieser Methode müssen wir sowohl die Breite als auch die Höhe des Bildes kennen, im Gegensatz zum vorherigen Code, bei dem nur die Höhe benötigt wurde.

Möchten Sie mehr?

Wir können dieses Konzept noch etwas erweitern, um ausgefeiltere Situationen zu berücksichtigen. Zum Beispiel können wir das Bild nach rechts schwebend positionieren, aber mit justify-content: center in der Mitte der Box verankern: und auch unser Innenrechteck in die Mitte verschieben, indem wir shape-outside von inset(calc(100% - X) 0 0) zu inset(calc(50% - X/2) 0 0) ändern.

Wir können auch zwei Bilder in beiden unteren Ecken platzieren

Nichts Komplexes hier. Ich verwende einfach zweimal dasselbe schwebende Element, einmal rechts und wieder links. Und warum bei zwei Ecken aufhören, wenn wir Bilder in allen vier Ecken platzieren können?

Die gleiche grundlegende Idee steckt dahinter, aber wir verlassen uns bei den oberen Bildern auch auf die übliche Float-Funktion. Sie werden jedoch feststellen, dass das Konzept hier anfängt, ein wenig zu brechen, und wir unerwünschte Überläufe erhalten, je nach Größe der Container-Box. Wir können die Höhe des .float-Elements größer als 100 % machen und einigermaßen "magische Zahlen" anwenden, die die Dinge glätten, indem wir den `padding` und `margin` der Bilder anpassen.

Wussten Sie, dass shape-outside radial-gradient() als Wert akzeptiert? Wir können das verwenden, um abgerundete Bilder wie unten zu platzieren.

Der transparente Teil des Gradienten ist der freie Raum, in den der Text gelangen kann. Sie haben vielleicht bemerkt, dass wir auch border-radius auf das Bild angewendet haben. Die Eigenschaft shape-outside beeinflusst einfach das .float-Element, und wir müssen die Form des Bildes manuell anpassen, damit sie der von shape-outside definierten Form folgt.

Während wir dabei sind, kombinieren wir dies mit unserem früheren Beispiel, das das Bild in der vertikalen Mitte der Box verankert, indem wir justify-content: center verwenden.

Ein weiteres radial-gradient() und auch eine weitere border-radius-Konfiguration.

Wir hätten stattdessen einen linear-gradient() verwenden können, um eine dreieckige Form für den Umbruchbereich zu erzeugen.

Dies ist die gleiche Idee, die wir für radial-gradient() verwendet haben. Der große Unterschied ist, dass wir clip-path anstelle von border-radius verwenden, um unser Bild zuzuschneiden.

Und da wir es für die anderen gemacht haben, verwenden wir die Idee justify-content: center, um das Bild am vertikalen Mittelpunkt des rechten Rands der Box zu verankern.

Wir haben im obigen Demo ein conic-gradient() mit shape-outside verwendet, um die dreieckige Form zu definieren, und clip-path, um eine ähnliche Form auf dem Bild zu erhalten.

All diese Beispiele können noch weiter optimiert werden, indem weniger Code verwendet wird, falls das Bild dekorativ ist (wenn es aus SEO-Gründen nicht im HTML benötigt wird). Ersetzen wir das .float-Element durch ein Pseudo-Element und wenden das Bild stattdessen als Hintergrund an.

Wir verwenden mask, um nur den Teil des Bildes anzuzeigen, den wir benötigen, und raten Sie mal, es verwendet denselben Wert wie shape-outside! Also mussten wir nur einen Wert für die Form definieren.

Das ist alles!

Hier gibt es viele Möglichkeiten, nicht nur Rechtecke in Ecken, sondern jede Art von Form an jeder Position zu platzieren, indem im Wesentlichen die gleiche Code-Struktur verwendet wird. Wir müssen nur

• Die Eigenschaft shape-outside anpassen, um die Form zu definieren
• Etwas Styling auf das Bild anwenden, um der zuvor definierten Form zu folgen, *oder* denselben Wert auf mask anwenden, falls wir die Pseudo-Element-Version verwenden.

Dann hält alles an seinem Platz, sogar in responsiven Designs.