Schweben Sie ein Element in die untere Ecke

Müssen Sie ein Element nach rechts oder links auslegen, sodass der Text darum geht? Das ist eine leichte Aufgabe für die Float -Eigenschaft. Aber was ist, wenn Sie auch dieses Element (nennen wir es ein Bild) in einen der unteren Ecken schieben möchten, während wir dabei sind? Klingt ein bisschen schwierig, oder? Wir brauchen wahrscheinlich JavaScript?

Nein, ein paar Zeilen von (kniffligen) CSS können es tun! Hier ist die CSS-Lösung, mit der Ihr Bild unabhängig von Größe und Inhalt an der unteren Ecke festhält.

Größen Sie die Größe des Wrapper -Elements und sehen Sie die Magie bei der Arbeit:

Lassen Sie uns den Code analysieren.

Markup und Layout

Wir benötigen ein Wrapper -Element, um alles zu enthalten, und wir verwenden Flexbox. Mit Flexbox können wir uns auf die Standard -Stretch -Ausrichtung verlassen, um später die Höhe zu verwenden: 100%.

 <div>
  <div>
    <div> <img  alt="Schweben Sie ein Element in die untere Ecke" > </div>
    Lorem Ipsum Dolor ...
  </div>
</div>

 .Wrapper {
  Anzeige: Flex;
}

.schweben {
  float: rechts;
  Höhe: 100%;
  Anzeige: Flex;
  Align-Items: Flex-End;
  Form -Outside: Einschub (calc (100% - 100px) 0 0);
}

Die .box innerhalb des .wrapper ist unser Flex -Element. Wir brauchen kein bestimmtes CSS, das auf die Box angewendet wird. Es definiert die Höhe der Wrapper und wird gleichzeitig auf die gleiche Höhe gedehnt. Dieses Verhalten gibt uns eine „Referenzhöhe“, die von den untergeordneten Elementen verwendet werden kann.

Aus der Spezifikation:

Wenn das Flex-Element ausgerichtet ist: Stretch, das Layout für seinen Inhalt wiederholen und diese verwendete Größe als bestimmte Kreuzgröße behandeln, damit Kinder prozentualer Größe behoben werden können.

Das Schlüsselwort ist definitiv , das es uns ermöglicht, innerhalb des Box -Elements eine prozentuale (%) Höhe zu verwenden.

Nun zum schwebenden Element

Unser .float -Element nimmt dank der oben beschriebenen Höhenberechnung die gesamte Höhe neben dem Textinhalt. In diesem Element drücken wir das Bild mithilfe der Flexbox -Ausrichtung nach unten.

Nun zur echten Tricks, mit der Form-Outside-Eigenschaft. So definiert MDN es:

Die Form-Outside-CSS-Eigenschaft definiert eine Form-die nicht respektular sein kann-, die angrenzende Inline-Inhalte einwickeln sollte. Standardmäßig wickelt Inline -Inhalt um seine Randbox. Form-Outside bietet eine Möglichkeit, diese Verpackung anzupassen, und ermöglicht es, den Text um komplexe Objekte und nicht um einfache Kästchen zu wickeln.

Mit anderen Worten, Form-Outside legt die Art und Weise fest, wie der Inhalt um den Begrenzungsfeld eines Elements fließt.

Es dauert eine Reihe von Werten. Eine davon ist die Inset () -Funktion, die nach MDN wiederum:

Definiert ein eingelassenes Rechteck. Wenn alle ersten vier Argumente geliefert werden, repräsentieren sie die oberen, rechten, unteren und linken Offsets aus dem Referenzbox nach innen, die die Positionen der Kanten des eingelassenen Rechtecks ​​definieren.

Mit Form -Outside: Einschub (CALC (100% - x) 0 0) können wir ein einscharakteres Rechteck erstellen, das genau oben auf dem Bild startet. Und die Oberseite entspricht 100% - x, wobei x die Bildhöhe ist und 100% die Höhe des .float -Elements. Dadurch kann der Text in den freien Speicherplatz oben im Bild einwickeln. Dies ist reaktionsschnell und wir können leicht zwischen links und rechts wechseln (indem wir die Float -Eigenschaft einstellen)

Das war's! Die einzige große Einschränkung ist, dass Sie die Bildhöhe kennen müssen.

Lassen Sie uns das Markup optimieren

Wir können unseren Code immer noch ein wenig optimieren und den zusätzlichen Wrapper um das Bild entfernen.

 <div>
  <div>
    <img  alt="Schweben Sie ein Element in die untere Ecke" >
    Lorem Ipsum Dolor ...
  </div>
</div>

Dann werden unser CSS

 .Wrapper {
  Anzeige: Flex;
}

.schweben {
  float: rechts;
  Höhe: 100%;
  Breite: 100px;
  Form -Outside: Einschub (calc (100% - 100px / *Höhe * /) 0 0);
  Objekt-Fit: enthalten;
  Objektposition: unten;
}

Da wir die zusätzliche Wrapper entfernt haben, benötigen wir eine weitere Technik, um das Bild an der unteren Ecke zu platzieren. Dafür verwenden wir Objektfit und Objektposition, müssen jedoch die Breite des Bildes explizit angeben.

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

Willst du mehr?

Wir können dieses Konzept ein wenig weiter erweitern, um schickere Situationen zu berücksichtigen. Zum Beispiel können wir das Bild nach rechts schweben, aber es in die Mitte der Box mit Justify -Content: Mitte: und auch unser Einschub -Rechteck in die Mitte einstellen

Wir können auch zwei Bilder an beiden unteren Ecken schweben:

Hier nichts Komplexes. Ich benutze einfach das gleiche schwimmende Element zweimal, einmal rechts und wieder links. Und warum in zwei Ecken anhalten, wenn wir Bilder in allen vier Ecken platzieren können:

Die gleiche Grundidee spielt hier im Spiel, aber wir verlassen uns auch auf die gemeinsame Float -Funktion für die Top -Bilder. Sie werden jedoch feststellen, dass das Konzept hier etwas abschließt, und wir erhalten einen unerwünschten Überlauf, abhängig von der Größe der enthaltenen Box. Wir können die Höhe des .float -Elements von mehr als 100% erreichen und etwas „magische Zahlen“ anwenden, die die Dinge glätten, indem sie die Polsterung und den Rand der Bilder einstellen.

Wussten Sie, dass Shape-Outside Radialgradient () 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 gehen kann. Möglicherweise haben Sie festgestellt, dass wir auch einen Grenzradius auf das Bild angewendet haben. Die Form-Outside-Eigenschaft wirkt sich einfach auf das .float-Element aus und wir müssen die Form des Bildes manuell anpassen, um der durch Form-Outside definierten Form zu folgen.

Während wir dabei sind, kombinieren wir dies mit unserem früheren Beispiel, mit dem das Bild mithilfe von Justify-Content: Center in die vertikale Mitte der Box steckt:

Ein weiterer Radialgradient () und auch eine andere Konfiguration von Border-Radius.

Wir hätten stattdessen eine lineargradient () verwenden können, um eine dreieckige Form für den Verpackungsbereich zu erstellen:

Dies ist die gleiche Idee, die wir für den Radialgradienten () verwendet haben. Der große Unterschied besteht darin, dass wir Clip-Pad anstelle von Border-Radius verwenden, um unser Bild zu schneiden.

Und da wir es für die anderen getan haben, verwenden wir die IDEA JUTZIFITÄT-CONTENT: Mitte, um das Bild an die vertikale Mitte der rechten Kante der Box zu stecken:

Wir haben in der obigen Demo einen Conic-Gradient () mit Form-Outside verwendet, um die dreieckige Form und den Clip-Pfad zu definieren, um eine ähnliche Form auf dem Bild zu erhalten

Alle diese Beispiele können weiterhin mit weniger Code optimiert werden, wenn das Bild dekorativ ist (wenn es für SEO -Zwecke nicht in der HTML benötigt wird). Ersetzen wir das .float-Element durch ein Pseudoelement und wenden Sie stattdessen das Bild als Hintergrund an:

Wir verwenden Maske, um genau den Teil des Bildes anzuzeigen, den wir brauchen, und raten Sie mal, was verwendet der gleiche Wert wie Form-Outside! Wir mussten also nur einen Wert für die Form definieren.

Das war's!

Es gibt hier viele Möglichkeiten, nicht nur Rechtecke in Ecken zu legen, sondern auch in jeder Art von Form an jeder Position, die weitgehend dieselbe Codestruktur verwenden. Wir müssen nur:

• Passen Sie die Form-Outside-Eigenschaft an, um die Form zu definieren
• Wenden Sie ein gewisses Styling auf das Bild an, um der zuvor definierten Form zu folgen , oder wenden Sie denselben Wert auf Maske an, falls wir die Pseudo -Elementversion verwenden

Dann hält alles, auch in reaktionsschnellen Designs.

Das obige ist der detaillierte Inhalt vonSchweben Sie ein Element in die untere Ecke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!