In Tailwind CSS sind ersetzte Elemente die Elemente, deren Inhalt durch eine externe Ressource wie Bilder und Videos ersetzt wird. Manchmal stehen Benutzer vor der Herausforderung, ein ersetztes Element im Container zu positionieren. Dies liegt daran, dass diese Elemente den Container überlaufen können, wenn ihre Größe größer als der verfügbare Platz ist. Tailwind CSS stellt Hilfsklassen bereit, um zu steuern, wie der Inhalt eines ersetzten Elements innerhalb des Containers positioniert und ausgerichtet wird.
In diesem Artikel wird die Methode zum Positionieren ersetzter Elemente innerhalb eines Containers in Tailwind CSS veranschaulicht.
Wie positioniert man ersetzte Elemente innerhalb eines Containers in Tailwind?
Um ersetzte Elemente innerhalb eines Containers in Tailwind zu positionieren, erstellen Sie ein HTML-Programm und verwenden Sie das „ Objekt-
Syntax
< Element Klasse = 'object-
Beispiel
In diesem Beispiel erstellen wir einen Container und verwenden alle „ Objekt- ” (Bild)-Elemente, um ihre ersetzte Position innerhalb des Containers anzugeben:
< Körper >
< div Klasse = „bg-sky-300 Grid Grid-Zeilen-3 Grid-Flow-Spalte M-5 Leerzeichen-Y-4 P-4 Justify-Between“ >
< Bild Klasse = „object-none object-left-top w-24 h-24 my-4“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-links w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-links-unten w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „object-none object-top w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-Zentrum w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-unten w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-rechts-oben w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-rechts w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
< Bild Klasse = „Objekt-kein Objekt-rechts-unten w-24 h-24“ src = „https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg“ >
div >
Körper >
Hier im übergeordneten
- „ bg-sky-300 Die Klasse „Setzt die Hintergrundfarbe des -Containers auf „Himmel“.
- „ Netz Die Klasse „ermöglicht ein Rasterlayout.
- „ Rasterzeilen-3 Die Klasse „Setzt die Zeilennummer im Raster auf 3.
- „ Grid-Flow-Spalte Die Klasse „definiert den Fluss von Rasterelementen in Spalten.
- „ m-5 Die Klasse fügt 5 Einheiten Rand um den Container hinzu.
- „ Leerzeichen-y-4 Die Klasse fügt einen vertikalen Abstand von 4 Einheiten zwischen den untergeordneten
-Elementen innerhalb des Containers hinzu.
- „ S. 4 Die Klasse „Fügt dem Inhalt im Container 4 Fülleinheiten hinzu.
- „ rechtfertigen-zwischen Die Klasse „richtet die untergeordneten Elemente innerhalb des Containers aus und verteilt sie gleichmäßig.
In den
-Elementen:
- „ Objekt-keine Die Klasse „wendet keine Position auf das Element an und zeigt das Element an seiner Standardposition im Container an.
- „ Objekt-links-oben Die Klasse „
“ positioniert das Element in der oberen linken Ecke seines Containers.
- „ Objekt-links Die Klasse „richtet das Element am linken Rand des Containers aus und hält es vertikal zentriert.
- „ Objekt-links-unten Die Klasse positioniert das
-Element in der unteren linken Ecke ihres Containers.
- „ Objekt-oben Die Klasse „Positioniert das Element am oberen Rand seines Containers und setzt es horizontal zentriert.
- „ Objektzentrum Die Klasse „Positioniert das Element in der Mitte des Containers und hält es horizontal und vertikal zentriert.
- „ Objekt-unten Die Klasse „Positioniert das Element am unteren Rand seines Containers und hält es horizontal zentriert.
- „ Objekt-rechts-oben Die Klasse „
“ positioniert das Element in der oberen rechten Ecke des Containers.
- „ Objektrecht Die Klasse „Positioniert das Element am rechten Rand seines Containers und hält es vertikal zentriert.
- „ Objekt-rechts-unten Die Klasse „Positioniert das Element in der unteren rechten Ecke seines Containers.
Ausgabe
Auf der obigen Webseite ist zu erkennen, dass der gesamte Inhalt des ersetzten Elements erfolgreich positioniert wurde.
Abschluss
Um ersetzte Elemente innerhalb eines Containers in Tailwind zu positionieren, muss „ Objekt-
„Dienstprogramme werden mit den gewünschten Elementen, wie zum Beispiel Bildern, verwendet. Benutzer müssen die spezifische Position oder Seite, d. h. links, rechts oder in der Mitte, im Dienstprogramm „object- “ definieren, um die ersetzten Elemente zu positionieren. In diesem Artikel wurde die Methode zum Positionieren ersetzter Elemente innerhalb eines Containers in Tailwind CSS veranschaulicht.